vue怎么单项往集合里面添加图片

img

这个数据是新增的时候保存的,这里只是从数据库读取出来显示。

示例如下


<div id="app">
    <table border="1">
        <tr><th>学号</th><th>姓名</th><th>性别</th><th>照片</th></tr>
        <tr v-for="item in list"><td>{{item.no}}</td><td>{{item.name}}</td><td>{{item.sex}}</td><td><img :src="item.img" /></td></tr>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [
                { no: '001', name: '学生1', sex: '男', img: 'https://avatar.csdnimg.cn/0/0/4/4_weixin_46216203_1631631703.jpg' },
                { no: '002', name: '学生2', sex: '男', img: 'https://avatar.csdnimg.cn/D/4/8/2_technologist_40_1621503911.jpg' },
            ],
            list2: [1, 2, 3]
        }
    })
</script>


有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~

td里 img src="图片路径就可以"

我的理解是动态给已经获取的数组中每一项添加一张图片,以下作为参考,如有帮助请点采纳

 arr1: [
        {
          name: 'john',
          sexual: 'male'
        },
        {
          name: 'nark',
          sexual: 'male'
        },
        {
          name: 'mary',
          sexual: 'female'
        }
      ],
      arrAdd: ['J', 'N', 'M']

 this.arr1.map((item, index) => {
        item.nickName = this.arrAdd[index]
      })