vue项目中 img标签加载失败(404)方法，@error事件

最新推荐文章于 2024-10-23 11:53:33 发布

原创最新推荐文章于 2024-10-23 11:53:33 发布 · 4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#img加载

VUE 同时被 2 个专栏收录

117 篇文章

订阅专栏

HTML标签

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用img标签的@error事件来实现图片加载失败时的备用图片显示，包括定义默认图片路径及处理错误事件的方法。

vue项目中 img标签加载失败方法，@error事件

`@error="defImg"`


<img src="123" @error="defImg" alt="" width="150" >

export default {
	data() {
	      return {
	      		defaultImg: require("@/assets/img/img_fail.png"),
	      }
	 },
	 methods: {
		 defImg(){
	                let img = event.srcElement;
	                img.src = this.defaultImg;
	                img.onerror = null; //防止闪图
            },
	 }
	 
}