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

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

我们在做项目是、时,有时候一些图片会不显示,会报错,加载失败,会显得不美观,有一种方法可以很好的解决: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事件图片加载失败时的样子,这个事件是让页面更美观。

相关文章
|
小程序 开发者
小程序图片报错替换
小程序图片报错替换
93 0
|
6月前
|
文字识别 小程序 开发工具
mPaaS小程序问题之调用选图片的时候报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
|
API
调用图片转PDF功能时返回DocProcessError错误
调用图片转PDF功能时返回DocProcessError错误
140 3
html+css+js图片加载失败设置默认图片
html+css+js图片加载失败设置默认图片
131 0
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
814 0
|
JavaScript 前端开发 API
图片懒加载的三种解决方法
学习前端,三板斧,HTML、CSS、JavaScript。JavaScript 基础由 DOM、BOM、ECMAScript 组成,其中 ECMAScript 为规范语言,现在说的 ES6(ES2016~ES2022) 指的就是它,隔段时间就会发布,目前一年发布一次,以年份来说,现在是 ECMAScript 2022。
408 0
图片懒加载的三种解决方法
|
XML 数据格式
图片加载错乱,Glide无法设置Tag解决方式
图片加载错乱,Glide无法设置Tag解决方式
352 0
|
JSON Java 开发工具
上传回调错误及排除
总结了SDK/API上传回调的示例、回调服务器的实现示例,说明了上传回调的调试方法,列举了上传回调的常见问题及排除方法。
16210 0
|
测试技术 编译器 C++