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

原创于 2021-02-20 15:00:34 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#img加载

VUE 同时被 2 个专栏收录

116 篇文章

订阅专栏

HTML标签

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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; //防止闪图
            },
	 }
	 
}

在这里插入图片描述