淺談在vue-cli3項(xiàng)目中解決動態(tài)引入圖片img404的問題
博主最近手頭再做一個項(xiàng)目，需要調(diào)用天氣接口，并且還要動態(tài)顯示天氣相關(guān)圖片icon。
本來以為沒什么大問題，結(jié)果硬生生被這個動態(tài)圖片路徑搞得民不聊生（博主還是 too young，too simple~），給出效果圖：
就是那個紅框選中的那個天氣狀況圖標(biāo)icon要根據(jù)當(dāng)前城市獲取當(dāng)前城市天氣狀態(tài)碼，再根據(jù)當(dāng)前城市狀態(tài)碼找到這個對應(yīng)的天氣圖標(biāo)icon~~
按照一般的開發(fā)模式，靜態(tài)圖片路徑是相對路徑還是絕對路徑都可以，因?yàn)閳D片路徑是靜態(tài)的是死的，所以webpack去找這個圖片路徑的時候是能找到的。
但是博主這個路徑是動態(tài)的，博主在computed給出一個拼接了變量的路徑，項(xiàng)目啟動在瀏覽器下死活出不了這個圖片，死活都是404~~~
就是上述這樣的路徑是不行的，一直是404，原因也講了點(diǎn)，vue-cli3中內(nèi)置的webpack會把圖片當(dāng)做一個模塊引用，然后打包等等，路徑就不對了，我們的靜態(tài)資源是不需要打包等等的，
靜態(tài)資源是直接被webpack copy到對應(yīng)的靜態(tài)資源文件夾下，所以根本原因就在于，用了動態(tài)路徑的圖片，webpack將它認(rèn)作為一個模塊打包了，路徑錯亂，所以404。
找到了原因就很簡單了，解決這個動態(tài)路徑圖片404的方案其實(shí)vue-cli3官網(wǎng)就有寫過（vie官方人員還是相當(dāng)靠譜的，雖然坑也多~~~）
其實(shí)很簡單：
1.
引入項(xiàng)目的根路徑前綴 baseUrl
baseUrl: process.env.BASE_URL
2.
把你所用的動態(tài)圖片img放到public目錄下
3.
修改你的動態(tài)路徑圖片地址
fullUrl: function() {
// `this` 指向 vm 實(shí)例
return `${this.baseUrl}cond-icon-heweather/${this.twCode}.png`;
}
4.
將圖片路徑綁定到你的頁面上去，這里博主還加了一個sync修飾詞，有興趣的同學(xué)去研究一下這個sync干什么用的。點(diǎn)我
這樣就可以解決引入動態(tài)圖片img404這個令人頭疼的問題啦~
以上這篇淺談在vue-cli3項(xiàng)目中解決動態(tài)引入圖片img404的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用技巧及vue項(xiàng)目中遇到的問題,本文給大家?guī)淼闹皇且徊糠?，后續(xù)還會持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯亂問題)
這篇文章主要介紹了vue-video-player 解決微信自動全屏播放問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法，需要的朋友可以參考一下2019-12-12
vue項(xiàng)目中,main.js,App.vue,index.html的調(diào)用方法
今天小編就為大家分享一篇vue項(xiàng)目中,main.js,App.vue,index.html的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue3中實(shí)現(xiàn)虛擬列表組件的相關(guān)知識,包含加載更多以及l(fā)oading狀態(tài),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-10-10
這篇文章主要介紹了vue中封裝echarts公共組件過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue項(xiàng)目中取消ESLint代碼檢測的步驟講解
今天小編就為大家分享一篇關(guān)于在Vue項(xiàng)目中取消ESLint代碼檢測的步驟講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10