Vue項目動態(tài)加載圖片正確寫法
1. 錯誤的寫法
以下情況運行異常，圖片加載不出來
<img class="img" :src="imgSrc" /> <script> let imgSrc = '../../assets/img1.png'; </script>
2. 正確的實踐寫法
方法 1
這時候需要換個寫法，讓編譯時把圖片加上去一起處理
原因：編譯時webpack會將圖片當(dāng)成模塊加載使用。然而上面第 1 點是動態(tài)的，loader無法解析圖片路徑，所以編譯規(guī)則處理不了，所以加載時會找不到圖片。
<img class="img" :src="imgSrc" /> <script> import img1 from '../../assets/img1.png' let imgSrc = img1; </script>
方法2
把圖片資源放到靜態(tài)目錄下static，引用的時候就直接是固定地址進(jìn)行引用
assets和static的區(qū)別：
assets：在項目編譯的過程會被webpack處理解析為模塊依賴，只支持相對路徑的形式。
static：在static這個目錄下文件不會被webpack處理和解析，webpack直接復(fù)制到最終的打包目錄dist/static。必須使用絕對路徑引用這些文件。
<img src="/static/img1.png" />
附：vue中動態(tài)加載圖片路徑
在vue中加載圖片路徑跟我們不用框架引入路徑是不同，在頁面中使用的話，寫的路徑是可以生效的，但是我們想動態(tài)加載圖片路徑的話是不生效的。
這里有兩種方法來解決：
方法一：（推薦）
1、頁面上，綁定動態(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項目動態(tài)加載圖片正確寫法的文章就介紹到這了,更多相關(guān)Vue動態(tài)加載圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE Elemen-ui之穿梭框使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
在Vue3中,我們可以通過?provide?和?inject?來實現(xiàn)父子組件之間的數(shù)據(jù)傳遞,這也適用于實現(xiàn)彈框功能,下面我們就來學(xué)習(xí)一下vue3實現(xiàn)彈框功能的具體方法吧2023-12-12
這篇文章主要介紹了vue項目打包后請求地址錯誤/打包后跨域操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動效,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue前端優(yōu)雅展示后端十萬條數(shù)據(jù)面試點剖析
這篇文章主要為大家介紹了vue前端優(yōu)雅展示后端十萬條數(shù)據(jù)的考點剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了9102年webpack4搭建vue項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了Vue router重定向redirect如何傳值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了VueJS組件之間通過props交互及驗證的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-09-09