V-for绑定img属性图片不显示

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: [] },
      ],
    };
  },