Vue 图片加载失败显示默认图片

方法一：通过onerror属性加载默认图片

<img :src="img" :onerror="defaultImg" /><script>
export default {data() {return {img: '', // 访问图片的ip地址defaultImg: `this.src = '${require('@/assets/images/right/default-person.png')}'`, };},
}
</script>

方法二：通过@error方法加载默认图片

<img :src="img"  @error="handleError" />export default {data() {return {img: '', // 访问图片的ip地址defaultImg: '/R-C.jpg',};},methods: {handleError(e) {e.target.src = this.defaultImg;},},
}
</script>