img标签得onerror事件

当网页中的图片加载失败时,可以利用HTML img标签的onerror事件来优雅地处理这种情况。通过设置备用图片,当原图无法加载时,替换为预设的错误提示图片。例如,如果`logo.png`加载失败,将显示`logoError.png`。为了避免可能出现的死循环,可以添加额外的处理,如在图片加载错误时停止onerror事件的传播。在Vue中,可以通过`@error`指令并结合方法来实现这一功能,确保图片加载的稳定性。

有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?

可以借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下: 

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

 当图片images/logo.png不存在时,将触发 onerror事件,而 onerror 中又为该 img 指定了images/logoError.png图片。也就是说图片images/logo.png存在则显示logo.png,图片images/logo.png不存在将显示 logoError.png。

  *问题:如果images/logoError.png 也不存在,则会继续触发 onerror事件,导致死循环,故会出现打开网页时提示 Stack overflow at line: 0 错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件

  *解决方法:控制它不循环,代码如下:

  <img
            src="../../assets/visualImg/null.jpg"
            alt
            @error="errImg"
          />


    errImg() {
      let img = event.srcElement;
      img.src = require("../../assets/visualImg/null.jpg");
      img.onerror = null; //防止闪图 控制不要一直跳动
    },

### HTML `img` 标签 `onerror` 属性使用方法 #### 基本概念 `onerror` 是一个事件处理器属性,用于指定图像加载失败时执行的 JavaScript 代码。这可以用来处理诸如网络错误、路径错误等情况下的用户体验优化。 #### 示例代码展示 下面是一个简单的例子来说明如何利用 `onerror` 来设置默认图片: ```html <img src="nonexistent.jpg" onerror="this.onerror=null; this.src='default.png';"> ``` 这段代码尝试加载名为 "nonexistent.jpg" 的图片;如果加载失败,则会触发 `onerror` 处理器函数,该函数将当前元素 (`this`) 的 `src` 属性更改为指向备用图片 'default.png'[^3]。 为了防止无限循环调用 `onerror`(即新设定的图片也加载失败),通常会在修改 `src` 前先清除原有的 `onerror` 事件监听器 (`this.onerror=null`)。 #### 结合框架的应用场景 对于现代前端开发环境而言,在某些情况下可能希望以更加优雅的方式管理资源加载逻辑。例如,在 Vue.js 中可以通过自定义指令实现相同的功能[^4]: ```javascript Vue.directive('getImage', { inserted(el, binding){ const imgSrc = el.getAttribute('src'); fetchImage(imgSrc).then(response => response.blob()).then(blob => { const objectUrl = URL.createObjectURL(blob); el.src = objectUrl; }).catch(() => { el.src = '/path/to/default-image'; }); } }); ``` 此段代码展示了创建一个新的 Vue 自定义指令 `v-getImage` ,它可以在插入阶段自动获取并更新 `<img>` 元素的实际源文件地址,并且在遇到任何异常情况时切换到预设好的默认图标的流程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值