vue :src图片不显示解决办法

总结几个可以解决本地图片路径显示不出来的问题：

1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。
3.图片放在assets文件夹，然后在data里面require进图片

<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index">
                    <img :src="require('../../assets/image/'+item)" alt="" :size="400">
                </el-carousel-item>

参考博客

我的例子
父组件数据

  data: function () {
		  return {
		    orderList: [
          {icon: require('../../assets/img/profile/message.svg') , iconColor: '#ff8198', info: '我的消息'},
          {icon:require('../../assets/img/profile/pointer.svg') , iconColor: '#fc7b53', info: '积分商城'},
          {icon: require('../../assets/img/profile/vip.svg') , iconColor: '#ffc636', info: '会员卡'},
        ],
        serviceList: [
          {icon:  require('../../assets/img/profile/cart.svg'), iconColor: '#ff8198', info: '我的购物车'},
          {icon:require('../../assets/img/profile/shopping.svg') , iconColor: '#ff8198', info: '下载购物APP'},
        ],
     
      }
    },

传值给子组件

	export default {
		name: "ListView",
    props: {
		  listData: {
		    type: Array,
        default: function () {
          return []
        }
      }
    },
    mounted() {
      console.log(this.listData[0].icon);
    },
	}

子组件渲染使用

 <div id="list">
      <div v-for="(item, index) in listData" :key="index" class="item">
        <span class="icon">
         <img  :src='item.icon' alt=""  >
        </span>
        <div class="info">{{item.info}}</div>
      </div>
    </div>

实现效果

我的图标都是svg格式不知道要怎么修改颜色