Vue項(xiàng)目動(dòng)態(tài)加載圖片正確寫法
1. 錯(cuò)誤的寫法
以下情況運(yùn)行異常，圖片加載不出來
<img class="img" :src="imgSrc" /> <script> let imgSrc = '../../assets/img1.png'; </script>
2. 正確的實(shí)踐寫法
方法 1
這時(shí)候需要換個(gè)寫法，讓編譯時(shí)把圖片加上去一起處理
原因：編譯時(shí)webpack會(huì)將圖片當(dāng)成模塊加載使用。然而上面第 1 點(diǎn)是動(dòng)態(tài)的，loader無法解析圖片路徑，所以編譯規(guī)則處理不了，所以加載時(shí)會(huì)找不到圖片。
<img class="img" :src="imgSrc" /> <script> import img1 from '../../assets/img1.png' let imgSrc = img1; </script>
方法2
把圖片資源放到靜態(tài)目錄下static，引用的時(shí)候就直接是固定地址進(jìn)行引用
assets和static的區(qū)別：
assets：在項(xiàng)目編譯的過程會(huì)被webpack處理解析為模塊依賴，只支持相對路徑的形式。
static：在static這個(gè)目錄下文件不會(huì)被webpack處理和解析，webpack直接復(fù)制到最終的打包目錄dist/static。必須使用絕對路徑引用這些文件。
<img src="/static/img1.png" />
附：vue中動(dòng)態(tài)加載圖片路徑
在vue中加載圖片路徑跟我們不用框架引入路徑是不同，在頁面中使用的話，寫的路徑是可以生效的，但是我們想動(dòng)態(tài)加載圖片路徑的話是不生效的。
這里有兩種方法來解決：
方法一：（推薦）
1、頁面上，綁定動(dòng)態(tài)路徑：
<img :src=" imgUrl "/>
2、data里面：用 require(圖片路徑）
data(){
return{
imgUrl:require('@/assets/img/mind/mind_5.svg');
}
}方法二：
把圖片放到static，然后相對路徑獲取圖片就好了
src: '../../../../static/images/docx.png'
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目動(dòng)態(tài)加載圖片正確寫法的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)加載圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
對Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue動(dòng)畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例
今天小編就為大家分享一篇vue動(dòng)畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11![警告[vue-router]?Duplicate?named?routes?definition簡單解決方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個(gè)錯(cuò)誤提示是因?yàn)樵赩ue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了如何在vue3中同時(shí)使用tsx與setup語法糖，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個(gè)頁面需要就在那個(gè)頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
在我們用vue時(shí),我們經(jīng)常用到一個(gè)方法是this.$nextTick,相信你也用過,我常用的場景是在進(jìn)行獲取數(shù)據(jù)后,需要對新視圖進(jìn)行下一步操作或者其他操作時(shí),發(fā)現(xiàn)獲取不到dom,這篇文章主要給大家介紹了關(guān)于$nextTick的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07