渲染图片时出现加载失败的图片
查看后端返回的数据发现为图片链接存放位置、名称不统一导致,有些存在data中,有些不是数组是string
将加载失败的图片统一为一张图,使用el-image的error 自定义加载失败的内容
<el-image
v-for="item in row.image"
:key="item.url"
style="width: 50px; height: 50px"
:src="item.url"
>
//加载失败时触发 可以是图片或者图标
//1.自定义图片:
<div slot="error" class="image-slot">
<el-image
:src="require('@/assets/bigUserHeader.png')"
></el-image>
</div>
//2.自定义图标:
<div slot='error' class='image-slot'>
<i class="el-icon-picture-outline" ></i>
</div>
</el-image>
统一了加载失败的图片: