图片加载失败时怎样替换?

简介: 图片加载失败时怎样替换?

我们在做项目是、时,有时候一些图片会不显示,会报错,加载失败,会显得不美观,有一种方法可以很好的解决:onerror 事件,这个事件属于一个错误事件,就是当页面报错是会触发。

<img src="img/企业家图片/微信图片_20230908215633.jpg" width="100%" height="100%" onerror="javascript:this.src='img/企业家图片/图片加载失败.png';this.onerror = null"/>

这是一个比较简单的方法,可以直接在HTML里的img行内添加,里面有两个src,第一个src是正常显示图片,第二个是在onerror事件里,当图片加载失败时的替换图片,如果第二张图片也失败的话,页面会进入死循环。

这是正常图片加载失败时的样子;

这是添加onerror事件图片加载失败时的样子,这个事件是让页面更美观。

相关文章
|
10月前
|
小程序 开发者
小程序图片报错替换
小程序图片报错替换
73 0
jq判断图片加载错误就使用另一个图片
jq判断图片加载错误就使用另一个图片
|
10月前
html+css+js图片加载失败设置默认图片
html+css+js图片加载失败设置默认图片
100 0
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
674 0
|
JavaScript 前端开发 API
图片懒加载的三种解决方法
学习前端,三板斧,HTML、CSS、JavaScript。JavaScript 基础由 DOM、BOM、ECMAScript 组成,其中 ECMAScript 为规范语言,现在说的 ES6(ES2016~ES2022) 指的就是它,隔段时间就会发布,目前一年发布一次,以年份来说,现在是 ECMAScript 2022。
377 0
图片懒加载的三种解决方法
|
XML 数据格式
图片加载错乱,Glide无法设置Tag解决方式
图片加载错乱,Glide无法设置Tag解决方式
313 0
|
JSON Java 开发工具
上传回调错误及排除
总结了SDK/API上传回调的示例、回调服务器的实现示例,说明了上传回调的调试方法,列举了上传回调的常见问题及排除方法。
16096 0
|
测试技术 编译器 C++