<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt="test1.png":onerror="errorImg" /><hr><h3>el-image懒加载、大图预览、加载占位、加载失败、</h3><div class="demo-image-error"><div class="block"><span class="demonstration">默认</span><el-image :src="url":preview-src-list="srcList"lazy></el-image><!-- 可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载 --></div><div class="block"><span class="demonstration">自定义</span><el-image src=""><div slot="placeholder">加载中<span class="dot">...</span></div><div slot="error"><i class="el-icon-picture-outline"></i>加载失败</div></el-image></div></div></d2-container>
</template><style lang="scss" scoped>
img {width: 300px;height: 100px;
}
.demo-image-error {.block {display: inline-block;width: 200px;height: 250px;text-align: center;> span {display: block;width: 100%;}.el-image {width: 200px;height: 200px;line-height: 200px;border: 1px solid lightgray;}}
}
</style><script>
import errorPhoto from '@/assets/img/sbpmt1.png'
export default {data () {return {url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',errorImg: 'this.src="' + errorPhoto + '"',srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}}
}
</script>