一般图片我们都在src下的assets文件夹下images下
html中我们这样使用没问题
<img src="../../../../assets/images/know/_bji.png"style="width:24px;border-radius:5px;"/>
// ../../../../这个路径就根据自己在哪个文件中获取图片来自行写了
vue render配置img的src路径方法如下:
render: (h, params) => {
return h('div', [
h('img', {
style: {
width: "20px",
verticalAlign: "middle"
},
attrs: {
src: '../../../../assets/images/docx.png'
}
})
]);
}
结果: 图片加载不出来,百度了下大多不是我想要的答案,最后是assets与static的区别
注意:如果把图片放在assets与static中,html页面可以使用;但在动态绑定中,assets路径的图片会加载失败,webpack使用的是commenJS规范,必须使用require才可以,具体参考:这里有更详细的解释
然后解决方法: 项目中img图片挪下位置放到static/images下
render: (h, params) => {
return h('div', [
h('img', {
style: {
width: "20px",
verticalAlign: "middle"
},
attrs: {
src: '../../../../static/images/docx.png'
// 更改图片地址同步项目中的图片也要挪位置
}
})
]);
}