问题描述
代码如下
<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />
info: {
picture: [
{
title: "测试啊啊啊啊",
href: "javascript:void(0)",
picUrl:
"../assets/info/1.jpg"
}
]
}
这种引用方法失败,图片是不会显示的
如果不用动态的方法,直接写在src地址栏里面,是可以的
<img class="info-picture-main" :src="../assets/info/1.jpg" alt="ddd" srcset />
解决方案
使用require
<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />
info: {
picture: [
{
title: "测试啊啊啊啊",
href: "javascript:void(0)",
picUrl: require("../assets/info/1.jpg")
}
]
}
使用import
<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />
import pic1 from "../assets/info/1.jpg";
export default {
data() {
return {
info: {
picture: [
{
title: "学校召开引进人才暨青年教师代表座谈会dddddddddddddddddd",
href: "javascript:void(0)",
picUrl:pic1
}
]
}
};
}
};

本文介绍在Vue项目中遇到的动态加载图片不显示的问题及解决方案,通过使用require和import方法正确引用图片资源,确保图片能在页面上正常显示。
3527

被折叠的 条评论
为什么被折叠?



