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