vue :src图片不显示解决办法
<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index"><img :src="require('../../assets/image/'+item)" alt="" :size="400"></el-carousel-item>参考博客
·
总结几个可以解决本地图片路径显示不出来的问题:
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格式不知道要怎么修改颜色
更多推荐
已为社区贡献3条内容
所有评论(0)