好久沒(méi)更博了，最近也不知道在忙啥，反正就是感覺(jué)挺忙的，在群里看到陸陸續(xù)續(xù)有剛?cè)雟ue小伙伴問(wèn)vue動(dòng)態(tài)加載圖片總是404的狀況，這篇就簡(jiǎn)單的說(shuō)明為什么會(huì)出現(xiàn)以及解決辦法有哪些。

創(chuàng)新互聯(lián)建站于2013年成立，先為岑鞏等服務(wù)建站，岑鞏等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為岑鞏企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

首先先說(shuō)明下vue-cli的assets和static的兩個(gè)文件的區(qū)別，因?yàn)檫@對(duì)你理解后面的解決辦法會(huì)有所幫助

assets：在項(xiàng)目編譯的過(guò)程中會(huì)被webpack處理解析為模塊依賴(lài)，只支持相對(duì)路徑的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相對(duì)資源路徑，將有webpack解析為模塊依賴(lài)

static：在這個(gè)目錄下文件不會(huì)被webpack處理,簡(jiǎn)單就是說(shuō)存放第三方文件的地方，不會(huì)被webpack解析。他會(huì)直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對(duì)路徑引用這些文件，這是通過(guò)config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來(lái)確定的。任何放在static/中文件需要以絕對(duì)路徑的形式引用：/static[filename]

根據(jù)webpack的特性，總的來(lái)說(shuō)就是static放不會(huì)變動(dòng)的，第三檔的文件，asserts放可能會(huì)變動(dòng)的文件

問(wèn)題來(lái)了，用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}]
 }
}

跑起來(lái)發(fā)現(xiàn)圖片不顯示，錯(cuò)誤碼為404,

原因：在webpack中會(huì)將圖片圖片來(lái)當(dāng)做模塊來(lái)用，因?yàn)槭莿?dòng)態(tài)加載的，所以u(píng)rl-loader將無(wú)法解析圖片地址，然后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目錄下，但必須寫(xiě)成絕對(duì)路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會(huì)顯示出來(lái)，當(dāng)然你也可以通過(guò)在webpack.base.config.js定義來(lái)縮短路徑的書(shū)寫(xiě)長(zhǎng)度。

當(dāng)然你說(shuō)當(dāng)本地圖片太多時(shí)，這樣寫(xiě)豈不是很麻煩，那么其實(shí)我們是一這樣簡(jiǎn)化操作的。

第一步：在static里面新建一個(gè)json文件夾

第二部：填寫(xiě)json文件,如圖

第三部：將json引入響應(yīng)的vue文件中，解析引用就行了

如有疑問(wèn)，歡迎進(jìn)行討論。

以上這篇基于vue 動(dòng)態(tài)加載圖片src的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：基于vue動(dòng)態(tài)加載圖片src的解決方法
鏈接地址：http://www.rwnh.cn/article4/jddiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、軟件開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、小程序開(kāi)發(fā)、App設(shè)計(jì)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)