博主最近手頭再做一個專案，需要呼叫天氣介面，並且還要動態顯示天氣相關圖片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這個令人頭疼的問題啦~

以上這篇淺談在vue-cli3專案中解決動態引入圖片img404的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。