img 的 onerror属性

news/2025/4/1 1:20:26/

名词解释:

img 标签的 onerror 属性是一个事件处理属性,当图片因 src 地址无效、网络问题或其他加载错误导致加载失败时,会触发该属性内的代码。

1. <img> 标签的 src 属性

src(source 的缩写)属性是 <img> 标签的必需属性,其作用是指定要显示图片的路径或者 URL。当浏览器解析到 <img> 标签时,会依据 src 属性的值去尝试加载对应的图片。例如:

<img src="https://example.com/image.jpg" alt="示例图片">

在这个例子中,浏览器会尝试从 https://example.com/image.jpg 这个地址加载图片。

2. 图片加载失败的情况

图片加载失败可能由多种原因造成,常见的有以下几种:

  • 地址不存在src 属性指定的图片地址有误,比如文件路径错误、域名拼写错误或者图片文件本身就不存在。
  • 网络问题:网络连接不稳定、服务器故障或者被防火墙阻止等,导致浏览器无法访问到图片地址。
  • 权限问题:服务器配置不当,没有给予浏览器访问图片文件的权限。

3. onerror 属性的作用

onerror 属性是一个事件处理属性,它可以绑定一个 JavaScript 代码块或者函数。当图片加载失败时,浏览器会触发 onerror 事件,进而执行 onerror 属性里的代码。例如:

<img src="nonexistent-image.jpg" alt="示例图片" onerror="this.src='default-image.jpg'; this.alt='默认图片';">

在这个例子中,src 属性指定的 nonexistent-image.jpg 可能并不存在,当浏览器尝试加载该图片失败时,就会触发 onerror 事件,执行其中的代码。代码中的 this 指代当前的 <img> 元素,因此 this.src='default-image.jpg' 会将图片的 src 属性值替换为 default-image.jpgthis.alt='默认图片' 会将图片的 alt 属性值替换为 默认图片。这样,原本加载失败的图片就会被替换为默认图片显示在页面上。

4. 代码示例及效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>img onerror 示例</title>
</head><body><img src="nonexistent-image.jpg" alt="示例图片" onerror="this.src='https://dummyimage.com/400x300/cccccc/000000&text=Default+Image'; this.alt='默认图片';">
</body></html>

  在这个示例中,由于 nonexistent-image.jpg 可能不存在,图片加载失败后会触发 onerror 事件,将图片替换为一个默认的占位图片。
  综上所述,“当 src 属性地址不存在时执行 onerror 属性里的代码” 描述了 <img> 标签的 onerror 属性的基本工作机制,它为处理图片加载失败的情况提供了一种有效的方法,可以提升用户体验。


http://www.ppmy.cn/news/1584126.html

相关文章

JAVA SE :认识数组

目录 1.概念 2.数组的创建和初始化 2.1 创建 2.2 初始化 3.数组的使用 4.认识引用数据类型 4.1 JVM的内存分布 4.2 基本数据类型和引用数据类型 4.3 null的认识 5.二维数组 6.Arrays类的了解和使用 1.概念 数组用于存储一定数量相同类型的数据&#xff0c;可以看…

71. 我的第一个Linux驱动实验

一、字符设备驱动框架 字符设备驱动的编写主要就是驱动对应的open、close、read。。。其实就是 file_operations结构体的成员变量的实现。 其中关于 C 库以及如何通过系统调用“陷入” 到内核空间这个我们不用去管&#xff0c;我们重点关注的是应用程序和具体的驱动&#xff0…

正则表达式-万能表达式

1、正则 正则表达式是一组由字母和符号组成的特殊文本, 它可以用来从文本中找 出满足你想要的格式的句子. {“basketId”: 0, “count”: 1, “prodId”: #prodId#, “shopId”: 1, “skuId”: #skuId#} #prodId# re相关的文章&#xff1a; https://www.cnblogs.com/Simple-S…

Jmeter-负载测试

目录 一. 基础负载测试场景&#xff1a;固定并发用户数 1、线程组配置 2、HTTP请求配置 3、添加定时器 4、添加监听器 4.1 聚合报告 4.2 响应时间图 4.3 查看结果树 5、结果分析指标 二. 阶梯式加压场景&#xff08;逐步增加并发&#xff09; 1、插件安装 2、阶梯配…

利用GitHub Pages快速部署前端框架静态网页

文章目录 前言GitHub Pages 来部署前端框架&#xff08;Vue 3 Vite&#xff09;项目1、配置 GitHub Pages 部署2、将项目推送到 GitHub3、部署到 GitHub Pages4、访问部署页面5、修改代码后的更新部署顺序 前言 可以先参考&#xff1a; 使用 GitHub Pages 快速部署静态网页: …

Qt中QApplication::processEvents()详细讲解

QApplication::processEvents(); 是 Qt 框架中的一个关键函数&#xff0c;用于手动处理当前线程的事件队列。以下是其详细解释及使用场景&#xff1a; 1.作用 1.1处理挂起的事件 在默认情况下&#xff0c;Qt 的事件循环&#xff08;通过 QApplication::exec() 启动&#xff…

SpringBoot3解决跨域请求问题(同源策略、JSONP、CORS策略)(Access-Control-Allow-Origin)(2025详细教程)

目录 浏览器跨域请求问题。 浏览器同源策略。 第三方API调用。 前后端分离项目。 一、JSONP。&#xff08;dataType:jsonp&#xff09; &#xff08;1&#xff09;代码示例。 <1>前端ajax04.jsp页面。(发起Ajax请求) <2>后端springboot接口。(/hello)(返回JSONPObj…

“立正挨打”之后,黄仁勋正式公布英伟达的量子计算应对战略

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨浪味仙 行业动向&#xff1a;4500字丨13分钟阅读 当 14 位量子计算企业高管聚集在同一个讨论会上&#xff0c;为各自公司的生存和技术选择辩护时&#xff0c;会发生什么&…