博主最近手頭再做一個(gè)項(xiàng)目，需要調(diào)用天氣接口，并且還要?jiǎng)討B(tài)顯示天氣相關(guān)圖片icon。

本來(lái)以為沒(méi)什么大問(wèn)題，結(jié)果硬生生被這個(gè)動(dòng)態(tài)圖片路徑搞得民不聊生（博主還是 too young，too simple~），給出效果圖：

就是那個(gè)紅框選中的那個(gè)天氣狀況圖標(biāo)icon要根據(jù)當(dāng)前城市獲取當(dāng)前城市天氣狀態(tài)碼，再根據(jù)當(dāng)前城市狀態(tài)碼找到這個(gè)對(duì)應(yīng)的天氣圖標(biāo)icon~~

按照一般的開(kāi)發(fā)模式，靜態(tài)圖片路徑是相對(duì)路徑還是絕對(duì)路徑都可以，因?yàn)閳D片路徑是靜態(tài)的是死的，所以webpack去找這個(gè)圖片路徑的時(shí)候是能找到的。

但是博主這個(gè)路徑是動(dòng)態(tài)的，博主在computed給出一個(gè)拼接了變量的路徑，項(xiàng)目啟動(dòng)在瀏覽器下死活出不了這個(gè)圖片，死活都是404~~~

就是上述這樣的路徑是不行的，一直是404，原因也講了點(diǎn)，vue-cli3中內(nèi)置的webpack會(huì)把圖片當(dāng)做一個(gè)模塊引用，然后打包等等，路徑就不對(duì)了，我們的靜態(tài)資源是不需要打包等等的，

靜態(tài)資源是直接被webpack copy到對(duì)應(yīng)的靜態(tài)資源文件夾下，所以根本原因就在于，用了動(dòng)態(tài)路徑的圖片，webpack將它認(rèn)作為一個(gè)模塊打包了，路徑錯(cuò)亂，所以404。

找到了原因就很簡(jiǎn)單了，解決這個(gè)動(dòng)態(tài)路徑圖片404的方案其實(shí)vue-cli3官網(wǎng)就有寫(xiě)過(guò)（vie官方人員還是相當(dāng)靠譜的，雖然坑也多~~~）

vue-cli3的官方解決方案

其實(shí)很簡(jiǎn)單：

1.

引入項(xiàng)目的根路徑前綴 baseUrl

baseUrl: process.env.BASE_URL

2.

把你所用的動(dòng)態(tài)圖片img放到public目錄下

3.

修改你的動(dòng)態(tài)路徑圖片地址

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

4.

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

這樣就可以解決引入動(dòng)態(tài)圖片img404這個(gè)令人頭疼的問(wèn)題啦~

以上這篇淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論