vue动态加载图片问题，报错Cannot find module "."

正常在<img>标签加载图片的方式是

<img src="../assets/product2.jpg" alt="">

但是在vue中动态加载图片，直接用src是无效的，需要使用v-bind动态加载

<img :src="product.imgSrc" alt=""> //正确
<img :src="../assets/product2.jpg" alt=""> //直接使用字符串报错，src应该是变量

 但是 :src的值product.imgSrc = "../assets/product2.jpg"，图片仍然无法加载出来，需要使用require才可以。

但是，如果你这么使用require

src="../assets/product2.jpg";
imgSrc = require("../assets/product2.jpg")

还是会报错

Error: Cannot find module "."
    at webpackMissingModule (IndexPage.vue?d485:138)
    at VueComponent.eval (IndexPage.vue?d485:138)

因为require它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊，

require里的正确的格式必须是path，可以这么写：

var src = "product2.jpg";
 
let imgSrc = require('../assets/'+imgUrl);

此外，你还可以使用以下方法去解决这个问题：

解决方案1：背景图的方式

<div :style="{backgroundImage: 'url(' + imgPath + ')'}"></div>

解决方案3： 静态图片的方式

把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static/a.png