vue-cil和webpack中本地靜態圖片的路徑問題解決方案

標籤：本地圖片   alt   技術分享   資源   images   個人   根據   建立   log   

 1 本地圖片動態綁定img的src屬性

一般我們在html中或者vue組件檔案中引用圖片是這樣，這是不需要做特別處理的

我們將圖片放入assets中或者重建立立個檔案夾img什麼的都可以，隨意～

但是我們這時候可能會有個需求就是我們要動態綁定一組本地圖片

1 將圖片當成模組先引進來，再綁定

 

但是這種做法局限性比較大，模組化差，代碼不好看 。

如果我做的是純靜態網站展示，有許多的本地靜態資源需要載入，裡麵包括本機資料和本地圖片混合的好幾組，那不是要麻煩死～

 

1.1 所以我們需要三步第一步我們在src下面建立一個json檔案夾裡面放置靜態json資料

 

第二步將所有的靜態圖片資源放在和src同級目錄下的static檔案夾下

第三步你的路徑可以寫成自然的‘../../static/img/xxx.png‘ 也可以按照紅框中的寫法（這種寫法對應的是編譯後檔案的目錄）

 這樣子按照平常的動態綁定src屬性你的圖片路徑在開發模式下和生產模式下的圖片資源路徑都是不會出問題的1.2 小問題但也有個問題就是這種方式引用圖片是不會被url等載入器處理的

上面的紅框都是這種方式，最下面的紅框是用require的方式將圖片引進來的（被當成模組被url-loader處理，加入了hash值）

這個需要看網站本身的性質和具體業務以及個人取捨了，當然也可以混合著用，靈活一點沒有死的處理方法！

 

 

2 css中的本地圖片路徑在打包後的問題

你的項目在開發模式下css中用url（）引用圖片是正常的，但是打包後圖片路徑卻並沒有被處理或者說特別怪異

導致本地圖片資源無法載入，是不是有這樣的困惑？

只需要在原有的一個外掛程式上添加一段代碼即可：

 

這個外掛程式大家又應該都比較熟悉，就是將css從打包中單獨提取出來作為一個檔案夾，上面這個是vue-cil的編譯模板，大家可以根據這個參考一下

publicPath這個配置屬性的具體其他用法大家可以去官網看看，或者看看源碼。瞭解更多

 

以上～

 

vue-cil和webpack中本地靜態圖片的路徑問題解決方案