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
————————————————
版权声明：本文为CSDN博主「cxx4220」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cxx4220/article/details/103683518

 

 

 

https://blog.csdn.net/hzxonlineok/article/details/96307270