V-for绑定img属性图片不显示
图片不显示 修改前
<template>
<div class="operateBarItem">
<img class="operateBarItemImg" :src="item.imgurl" alt="" />
{{ item.operateName2 }}
</div>
</template>
<script>
export default {
data() {
return {
navList: [
{
name: `草图`,
operateList: [
{
operateName: "线条",
list: [
{
operateName2: "直线",
imgurl: "../assets/operateIcon/lines/tb_3line.svg",
}, ],
},
{ operateName: "形状", list: [{}] },
{ operateName: "调整", list: [{}] },
{ operateName: "限定", list: [{}] },
],
},
{ name: `特征`, operateList: [] },
{ name: `未知`, operateList: [] },
],
};
},
然后遇到了图片不显示的问题,找寻了很多资料发现在使用vfor循环时,如果要动态绑定img的src属性,在数据列表时要加入require()
解决
<template>
<div class="operateBarItem">
<img class="operateBarItemImg" :src="item.imgurl" alt="" />
{{ item.operateName2 }}
</div>
</template>
<script>
export default {
data() {
return {
navList: [
{
name: `草图`,
operateList: [
{
operateName: "线条",
list: [
{
operateName2: "直线",
//修改这里
imgurl: require("../assets/operateIcon/lines/tb_3line.svg"),
},
//修改结束
],
},
{ operateName: "形状", list: [{}] },
{ operateName: "调整", list: [{}] },
{ operateName: "限定", list: [{}] },
],
},
{ name: `特征`, operateList: [] },
{ name: `未知`, operateList: [] },
],
};
},