在vue中用v-for遍历img图片路径显示不出来的解决办法

显示不出来：

 代码：

<template>
  <div class="listPage">
    <div class="left">
      <div v-for="(item, index) in titleDate" :key="index">
        <i :class="item.iconOne"></i>
        <div>
          <i :class="item.iconTwo"></i>
          <img :src="item.iconTwo" alt="百度" />
          <i>{
   
   { item.title }}</i>
        </div>
        <i :class="item.iconThree"></i>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      titleDate: [
        {
          iconOne: 'el-icon-menu',
          iconTwo: '../assets/baidu.png',
          title: '百度',
          iconThree: 'el-icon-delete'
        },
        {
          iconOne: 'el-icon-menu',
          iconTwo: '../assets/weibo.png',
          title: '微博',
          iconThree: 'el-icon-delete'
        },
        {
          iconOne: 'el-icon-menu',
          iconTwo: '../assets/zhihu.png',
          title: '知乎',
          iconThree: 'el-icon-delete'
        }
      ]
    }
  }
}
</script>

解决方案：

把data里的图片路径这么设置：

 data() {
    return {
      titleDate: [
        {
          iconOne: 'el-icon-menu',
          iconTwo: require('../assets/baidu.png'),
          title: '百度',
          iconThree: 'el-icon-delete'
        },
        {
          iconOne: 'el-icon-menu',
          iconTwo: require('../assets/weibo.png'),
          title: '微博',
          iconThree: 'el-icon-delete'
        },
        {
          iconOne: 'el-icon-menu',
          iconTwo: require('../assets/zhihu.png'),
          title: '知乎',
          iconThree: 'el-icon-delete'
        }
      ]
    }
  }

加上require,就可以显示图片了。