（转载自用）vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。

1、如果直接使用本地路径渲染是渲染不出来的，因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。

这样怎么能找到路径？解决方案如下

// 渲染正常渲染即可

data() {
return {
// 使用require()包裹路径，网络路径就不需要这样直接渲染即可
imgPath: [
require(“…/assets/images/img1.jpg”),
require(“…/assets/images/img2.jpg”),
],
};
},

此时后面的路径就不是本地图片的路径了

2、第二种方案解决

data() {
return {
imgPath: [“img1.jpg”, “img2.jpg”],
};
},

• 来看一下我的图片存放文件

3、第三种解决方案 解决png

:src=“getImgUrl(companyLogoList[index], ‘jpg’)” // 可以解决png

data() {
return {
companyLogoList: [
“img1.jpg”,
“img2.jpg”,
],
};
},

methods: {
getImgUrl(url, type) {
if (type == “png”) {
const a = require(“…/assets/images/” + url + “.png”);
return a;
} else if (type == “jpg”) {
const b = require(“…/assets/images/” + url);
console.log(“b”, b);
return b;
}
},
},
————————————————
版权声明：本文为CSDN博主「有两把刷子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_54753561/article/details/122663537