當我們在Vue.js項目中引用圖片時，關於圖片路徑有以下幾種情形：
使用一
我們在data裏面定義好圖片路徑
1 | imgUrl:'../assets/logo.png' |
然後，在template模板裏面
1 2 | /*錯誤寫法*/<img src="{{imgUrl}}"> |
這樣是錯誤的寫法，我們應該用v-bind綁定圖片的srcs屬性
1 | <img :src="imgUrl"> |
或者
1 | <img src="../assets/logo.png"> |
這種方式是按照正常HTML語法引用路徑，放在模板裏可以被webpack打包出來。
使用二
當我們需要在js代碼裏面寫圖片路徑的時候，如果我們在data裏面寫
1 2 | /*錯誤寫法*/imgUrl:'../assets/logo.png' |
此時webpack只會把它當做字符串處理從而找不到圖片地址，此時我們可以使用import引入圖片路徑：
1 2 | <img :src="avatar" />import avatar from '@/assets/logo.png' |
在data裏面定義
1 | avatar: avatar |
情形三
我們也可以把圖片放在外層的static文件夾裏面，然後在data裏面定義：
1 2 | imgUrl ： '../../static/logo.png'<img :src="imgUrl" /> |