如何在vue中引入圖片？

當咱們在Vue.js項目中引用圖片時，關於圖片路徑有如下幾種情形：

使用1、

咱們在data裏面定義好圖片路徑

imgUrl:'../assets/logo.png'

而後，在template模板裏面

<img :src="imgUrl">
/*或者*/
<img src="../assets/logo.png">

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

 

使用2、

當咱們須要在js代碼裏面寫圖片路徑的時候，
若是咱們在data裏面寫

imgUrl:'../assets/logo.png'

此時webpack只會把它當作字符串處理從而找不到圖片地址，

此時咱們能夠使用import引入圖片路徑：

<img :src="avatar" />
import avatar from '@/assets/logo.png'

在data裏面定義

avatar: avatar