當(dāng)我們在Vue項(xiàng)目中引用圖片時，關(guān)于圖片路徑有以下幾種情形：

使用一

當(dāng)我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫

/*錯誤寫法*/

imgUrl:'../assets/table/xian.jpg'

此時webpack只會把它當(dāng)做字符串處理從而找不到圖片地址，

此時我們可以使用import引入圖片路徑：

import?imgurl?from 'src/assets/table/xian.jpg'

在data里面定義

imgUrl:?imgurl

<img :src="imgUrl" />

引入及定義

使用

使用二

按照正常HTML語法引用路徑???

?<img src="../assets/table/xian.jpg">

或者 我們在data里面定義好圖片路徑

imgUrl:'../assets/table/xian.jpg'

然后，在template模板里面

<img :src="imgUrl">??

這種方式是按照正常HTML語法引用路徑，放在模板里可以被webpack打包出來。

/*錯誤寫法*/

<img src="{{imgUrl}}">

這樣是錯誤的寫法，我們應(yīng)該用v-bind綁定圖片的src屬性

解決方案三：

我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：

imgUrl ： '../../static/table/xian.jpg'

<img :src="imgUrl" />