国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

基于vue 動(dòng)態(tài)加載圖片src的解決方法

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:20:01
文檔

基于vue 動(dòng)態(tài)加載圖片src的解決方法

基于vue 動(dòng)態(tài)加載圖片src的解決方法:好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續(xù)續(xù)有剛?cè)雟ue小伙伴問vue動(dòng)態(tài)加載圖片總是404的狀況,這篇就簡(jiǎn)單的說明為什么會(huì)出現(xiàn)以及解決辦法有哪些。 首先先說明下vue-cli的assets和static的兩個(gè)文件的區(qū)別,因?yàn)檫@對(duì)你理解后面
推薦度:
導(dǎo)讀基于vue 動(dòng)態(tài)加載圖片src的解決方法:好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續(xù)續(xù)有剛?cè)雟ue小伙伴問vue動(dòng)態(tài)加載圖片總是404的狀況,這篇就簡(jiǎn)單的說明為什么會(huì)出現(xiàn)以及解決辦法有哪些。 首先先說明下vue-cli的assets和static的兩個(gè)文件的區(qū)別,因?yàn)檫@對(duì)你理解后面

好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續(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

文檔

基于vue 動(dòng)態(tài)加載圖片src的解決方法

基于vue 動(dòng)態(tài)加載圖片src的解決方法:好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續(xù)續(xù)有剛?cè)雟ue小伙伴問vue動(dòng)態(tài)加載圖片總是404的狀況,這篇就簡(jiǎn)單的說明為什么會(huì)出現(xiàn)以及解決辦法有哪些。 首先先說明下vue-cli的assets和static的兩個(gè)文件的區(qū)別,因?yàn)檫@對(duì)你理解后面
推薦度:
標(biāo)簽: 圖片 VUE src
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 97热久久免费频精品99国产成人 | 亚洲精品国产综合一线久久 | 欧美极品尤物在线播放一级 | 日韩成人在线电影 | 久久久久久国产a免费观看黄色大片 | 99精品国产免费久久国语 | 欧美日韩国产码高清综合人成 | 亚洲精品社区 | 国产精品不卡在线观看 | 亚洲欧美一区二区三区九九九 | 国产欧美综合在线观看第七页 | 日韩欧美精品一区二区 | 国产在线欧美日韩一区二区 | 一级毛片不卡片免费观看 | 国产第一页在线视频 | 欧美xxxx做受欧美69 | 亚洲综合欧美 | 日韩高清第一页 | 国内精品免费 | 精品在线免费观看 | 亚洲欧美日韩激情在线观看 | wwww欧美| 明星国产欧美日韩在线观看 | 亚洲一区二区三区四区视频 | 日韩a无v码在线播放免费 | 91福利国产在线观一区二区 | 中文国产成人精品久久一 | 亚洲欧美精品成人久久91 | 视频精品一区二区 | 亚洲精品乱码久久久久久 | 色婷婷综合在线 | 福利视频一区二区牛牛 | 国产青草视频在线观看 | 国产日韩欧美91 | a欧美在线 | 台湾一级毛片永久免费 | 国产3区 | 国产乱淫a∨片免费视频 | 欧美精品在线视频 | 一边摸一边叫床一边爽 | 亚洲高清视频一区 |