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

 

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這個配置屬性的具體其餘用法你們能夠去官網看看，或者看看源碼。瞭解更多

 

以上～