方法一:通过onerror属性加载默认图片
javascript
<img :src="img" :onerror="defaultImg" />
<script>
export default {
name: 'testImgError',
data() {
return {
img: '', // 访问图片的ip地址
defaultImg: `this.src = '${require('@/assets/images/right/default-person.png')}'`,
};
},
}
</script>
方法二:通过@error方法加载默认图片
javascript
<img :src="img" @error="handleError" />
export default {
name: 'testImgError',
data() {
return {
img: '', // 访问图片的ip地址
defaultImg: require('@/assets/images/right/default-person.png'),
};
},
methods: {
handleError(e) {
e.target.src = this.defaultImg;
},
},
}
</script>