利用onerror 事件处理img标签中的src图片加载失败

简介: 利用onerror 事件处理img标签中的src图片加载失败

如果 img标签中的src图片logo.png加载失败,原来的图片位置会被error.png 替换

<img src="logo.png" onerror="handleImageError()" />

<script type="text/javascript">
  function handleImageError() {
    console.log(event);
    var img = event.target;
    img.src = "error.png";
    // 控制它不循环;
    img.onerror = null;
  }

如果logo.png不存在会触发 onerror事件,指定图片error.png 去替补,

如果替补图片error.png 还不存在,还会继续触发onerror事件,

需要使用img.onerror=null 取消事件处理

Vue处理方式

<template>

<img v-bind="$attrs"
v-on="$listeners"
@error="handleError" />
</template>

<script>
/**
* 有错误处理的图片
*/
export default {
name: "MoImage",

data() {
return {
// 默认值
defaultImage: require("@/assets/image/image-default.png"),
};
},

methods: {
// 错误值处理
handleError(event) {
event.target.src = this.defaultImage;
// 控制不要一直跳动
event.target.onerror = null;
},
},
};
</script>

参考

img标签的onerror事件

            </div>
目录
相关文章
|
9月前
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
1420 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
JavaScript
利用onerror 事件处理img标签中的src图片加载失败
利用onerror 事件处理img标签中的src图片加载失败
545 0
|
JavaScript
关于jQuery中toggle参数callback函数提前执行问题
关于jQuery中toggle参数callback函数提前执行问题
113 0
|
JavaScript
Element UI - el-image 图片初始化加载爬坑
Element UI - el-image 图片初始化加载爬坑
3140 0
Element UI - el-image 图片初始化加载爬坑
|
JavaScript
【JS】使用onclick方法把对象本身传输给方法
【JS】使用onclick方法把对象本身传输给方法
135 0
【JS】使用onclick方法把对象本身传输给方法
|
前端开发
前端面试题:1.页面加载完成(onload)之前触发的事件;2.History,Location,Window,Navigation的区别;3.e.target和e.currentTarget的区别
★Navagator:提供有关浏览器的信息 ★Window: Window对象处于对象层次的最顶层, 它提供了处理Navagator窗口的方法和属性 ★Location:提供了与当前打开的URL-工作的方 法和属性,是一个静态的对象 ★History:提供了与历史清单有关的信息 ★Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用
295 0
|
JavaScript 前端开发
JS判断图片加载完成方法
javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示。 document.getElementById("pic1").onload = function () { alert("图片加载已完成"); } 优点:简单易用,不影响HTML代码。
1673 0

热门文章

最新文章