vue-cli3項目中解決動態引入圖片img404的問題

 

博主最近手頭再做一個項目，需要調用天氣接口，並且還要動態顯示天氣相關圖片icon。

本來以為沒什么大問題，結果硬生生被這個動態圖片路徑搞得民不聊生（博主還是 too young，too simple~），給出效果圖：

就是那個紅框選中的那個天氣狀況圖標icon要根據當前城市獲取當前城市天氣狀態碼，再根據當前城市狀態碼找到這個對應的天氣圖標icon~~

按照一般的開發模式，靜態圖片路徑是相對路徑還是絕對路徑都可以，因為圖片路徑是靜態的是死的，所以webpack去找這個圖片路徑的時候是能找到的。

但是博主這個路徑是動態的，博主在computed給出一個拼接了變量的路徑，項目啟動在瀏覽器下死活出不了這個圖片，死活都是404~~~

就是上述這樣的路徑是不行的，一直是404，原因也講了點，vue-cli3中內置的webpack會把圖片當做一個模塊引用，然后打包等等，路徑就不對了，我們的靜態資源是不需要打包等等的，

靜態資源是直接被webpack copy到對應的靜態資源文件夾下，所以根本原因就在於，用了動態路徑的圖片，webpack將它認作為一個模塊打包了，路徑錯亂，所以404。

找到了原因就很簡單了，解決這個動態路徑圖片404的方案其實vue-cli3官網就有寫過（vie官方人員還是相當靠譜的，雖然坑也多~~~）

vue-cli3的官方解決方案

 其實很簡單：

1.

引入項目的根路徑前綴 baseUrl

　　

      baseUrl: process.env.BASE_URL

2.

把你所用的動態圖片img放到public目錄下

3.

修改你的動態路徑圖片地址

fullUrl: function() {
      // `this` 指向 vm 實例
      return `${this.baseUrl}cond-icon-heweather/${this.twCode}.png`;
    }

4.

將圖片路徑綁定到你的頁面上去，這里博主還加了一個sync修飾詞，有興趣的同學去研究一下這個sync干什么用的。點我

 

 

這樣就可以解決引入動態圖片img404這個令人頭疼的問題啦~如果有同學對實時更新時間，如何引入實時的天氣狀況感興趣，可以來私我哦~~~~

　　　　希望可以幫助更多前端的小伙伴~~~金木·晨 　　2018年09月17日18:05:14