在vue專案中圖片路徑的使用.md
阿新 • • 發佈:2018-12-11
在vue專案中圖片路徑的使用
應用vue-cli 構建的專案,圖片一般儲存在 src/assets 目錄或者是 static 目錄中,src 目錄下的檔案是webpack 打包時需要引用的,static 目錄是不經過打包直接引用的。
在 src/assets 目錄下的圖片引用:
在元件的 template 中根據正常路徑來引用即可
<img src="../assets/mg-pizza.jpg">
如果是在 script 中動態繫結圖片,那麼一定要先引入再使用 :
import mgPizza from '../assets/mg-pizza.jpg'
data() {
return {
'size': 12,
'price': 60,
'imgSrc': mgPizza
}
}
在 static 目錄下的圖片引用
無論是在 template 中還是在 script 中都按照正常的路徑來引用即可。
<img src="../../static/imgs/mg-pizza.jpg" alt="" >
data() {
return {
'size': 12,
'price' : 60,
'imgSrc': '../../static/imgs/mg-pizza.jpg'
}
}