欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項目動態(tài)加載圖片正確寫法

 更新時間：2024年04月02日 10:38:36   作者：GuoyeZhang  
最近做項目的時候遇到了動態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項目動態(tài)加載圖片的正確寫法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 錯誤的寫法

以下情況運行異常，圖片加載不出來

<img class="img" :src="imgSrc" />
<script>
let imgSrc = '../../assets/img1.png';
</script>

2. 正確的實踐寫法

方法 1

這時候需要換個寫法，讓編譯時把圖片加上去一起處理

原因：編譯時webpack會將圖片當成模塊加載使用。然而上面第 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，引用的時候就直接是固定地址進行引用

assets 和 static 的區(qū)別：
assets：在項目編譯的過程會被webpack處理解析為模塊依賴，只支持相對路徑的形式。
static：在static這個目錄下文件不會被webpack處理和解析，webpack直接復制到最終的打包目錄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)文章

最新評論