vue中for循环图片路径 动态生成图片

data () {
    return {
      orderList: [
        { icon: 'message', info: '我的消息' },
        { icon: 'pointer', info: '积分商城' },
        { icon: 'vip', info: '会员卡' }
      ],
      serviceList: [
        { icon: 'cart', info: '我的购物车' },
        { icon: 'cart', info: '下载购物APP' }
      ]
    }
  },

1.假数据icon里为图片文件名字

<div id="list">
    <div v-for="(item, index) in listData" :key="index" class="item" @click="itemClick(index)">
      <img :src="require(`assets/img/profile/${item.icon}.svg`)" alt="">
      <span class="info">{{item.info}}</span>
    </div>
  </div>

利用模板字符串进行拼接