好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續(xù)續(xù)有剛?cè)雟ue小伙伴問vue動(dòng)態(tài)加載圖片總是404的狀況,這篇就簡(jiǎn)單的說明為什么會(huì)出現(xiàn)以及解決辦法有哪些。
首先先說明下vue-cli的assets和static的兩個(gè)文件的區(qū)別,因?yàn)檫@對(duì)你理解后面的解決辦法會(huì)有所幫助
assets:在項(xiàng)目編譯的過程中會(huì)被webpack處理解析為模塊依賴,只支持相對(duì)路徑的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相對(duì)資源路徑,將有webpack解析為模塊依賴
static:在這個(gè)目錄下文件不會(huì)被webpack處理,簡(jiǎn)單就是說存放第三方文件的地方,不會(huì)被webpack解析。他會(huì)直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對(duì)路徑引用這些文件,這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對(duì)路徑的形式引用:/static[filename]
根據(jù)webpack的特性,總的來說就是static放不會(huì)變動(dòng)的,第三檔的文件,asserts放可能會(huì)變動(dòng)的文件
問題來了,用js動(dòng)態(tài)加載assets或者本文件的圖片出現(xiàn)404的狀態(tài)碼
代碼實(shí)例
<li v-for="(item,index) in images" :key="index"> <img :src="item.src"></li> //js部分 data(){ return { images:[{src:'./1.png'},{./2.png}] } }
跑起來發(fā)現(xiàn)圖片不顯示,錯(cuò)誤碼為404,
原因:在webpack中會(huì)將圖片圖片來當(dāng)做模塊來用,因?yàn)槭莿?dòng)態(tài)加載的,所以u(píng)rl-loader將無法解析圖片地址,然后npm run dev 或者npm run build之后導(dǎo)致路徑?jīng)]有被加工【被webpack解析到的路徑都會(huì)被解析為/static/img/[filename].png,完整地址為localhost:8080/static/img/[filename].png】
解決辦法:
①將圖片作為模塊加載進(jìn)去,比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]這樣webpack就能將其解析。
②將圖片放到static目錄下,但必須寫成絕對(duì)路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會(huì)顯示出來,當(dāng)然你也可以通過在webpack.base.config.js定義來縮短路徑的書寫長(zhǎng)度。
當(dāng)然你說當(dāng)本地圖片太多時(shí),這樣寫豈不是很麻煩,那么其實(shí)我們是一這樣簡(jiǎn)化操作的。
第一步:在static里面新建一個(gè)json文件夾
第二部:填寫json文件,如圖
第三部:將json引入響應(yīng)的vue文件中,解析引用就行了
如有疑問,歡迎進(jìn)行討論。
以上這篇基于vue 動(dòng)態(tài)加載圖片src的解決方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com