在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'
             } 
          }