v-for循环关于img标签的src动态绑定问题

问题示例代码

1 <div class="navclass">
     <nav >
        <div class="box" :style="moreContentStyle(item)" v-for="(item,index) in moreContent" >
            <img src="{{item.icon}}">
            <span>{{item.name}}</span>
        </div>
     </nav>
</div>

注意：这样并不能取到图片路径

解决方法（img标签动态绑定src）

 

 <div class="navclass">
      <nav >
         <div class="box" :style="moreContentStyle(item)" v-for="(item,index) in moreContent" >
             <img :src="item.icon">
             <span>{{item.name}}</span>
         </div>
      </nav>
</div>

<script>
    const moreContent = [
    {
     id:"03",
     name:"居家",
     icon:"https://yanxuan.nosdn.127.net/4f00675caefd0d4177892ad18bfc2df6.png",
    },
    {
     id:"02",
     name:"餐厨",
     icon:"https://yanxuan.nosdn.127.net/4aab4598017b5749e3b63309d25e9f6b.png",
    },
    {
     id:"04",
     name:"配件",
     icon:"https://yanxuan.nosdn.127.net/288b0e864a24763bade8e22c0c39ff02.png",
    },
    {
     id:"01",
     name:"饮食",
     icon:"https://yanxuan.nosdn.127.net/93168242df456b5f7bf3c89653b3db76.png",
    },
    {
     id:"09",
     name:"志趣",
     icon:"https://yanxuan.nosdn.127.net/f0698297aaac41b778c1ea65eefb8b34.png",
    },

]
</script>
结果截图

总结：主要是图片位置的问题，图片存放在什么位置，能够让img通过src动态的绑定对应的值；

其次是图片配置路径的问题，若图片就和响应的vue在同一个文件，直接通过 ./logo.png 是只能写死的情况下显示，而动态的：src绑定是无法完成这种情况的显示。

 

 

本文参考链接：

 

https://blog.csdn.net/qq_41860497/article/details/100059721