img 的 onerror属性

news2025/3/31 15:04:36

名词解释:

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.coloradmin.cn/o/2323761.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Zerotier虚拟局域网在树莓派的应用和Syncthing配合Zerotier实现端到端文件同步

一、Zerotier的部署 1、官网注册账号 https://my.zerotier.com/i 2、选择linux系统&#xff0c;执行安装Zerotier curl -s https://install.zerotier.com | sudo bash3、将树莓派网络加入Zerotier zerotier-cli join DB62228FEDF6CE55DB62228FEDF6CE55 为你的Zerotier IP 需…

51c嵌入式~三极管~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12208603 一、PNP与NPN两种三极管使用方法 分享这篇文章总结下关于NPN和PNP两种型号三极管的使用和连接方法。 在单片机应用电路中三极管主要的作用就是开关作用。 PNP与NPN两种三极管使用方法 上图中&#xff0c;横向左…

SQL中累计求和与滑动求和函数sum() over()的用法

[TOC](SQL中累计求和与滑动求和函数sum() over()的用法) 一、窗口函数功能简介 sum(c) over(partition by a order by b) 按照一定规则汇总c的值&#xff0c;具体规则为以a分组&#xff0c;每组内按照b进行排序&#xff0c;汇总第一行至当前行的c的加和值。 sum()&#xff1a…

【Sql Server】在SQL Server中生成雪花ID(Snowflake ID)

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言认识雪花ID…

FPGA——分秒计数器设计(DE2-115开发板)

一、项目创建 1.创建工程 点击File->New Project Wizard...或者直接在页面处点击 在第一行选择文件存放地点&#xff0c;第二行为项目名称&#xff0c;第三行为顶级设计实体名称 &#xff08;下面的步骤可以暂时不做直接点Finish&#xff0c;因为是先写代码先把它跑出来暂…

雅思练习总结(九)

雅思练习总结&#xff08;九&#xff09; 本文章是雅思练习总结&#xff08;九&#xff09;&#xff0c;总结了文章《BAKELITE》&#xff0c;内容包括原文精翻&#xff0c;文章脉络总结&#xff0c;单词扩展学习3个部分 1 文章原文及翻译 BAKELITE 翻译&#xff1a;贝克莱特…

windows USB 了解

GUID GUID 是一个 128 位的数字&#xff0c;在全球范围内是独一无二的&#xff0c;常被用于标识软件组件、设备接口等&#xff0c;以保证在不同系统和环境中能唯一识别特定对象。 DEFINE_GUID(GUID_DEVINTERFACE_USCUSTOMKEYS, 0x12345678, 0x1234, 0x5678, 0x12, 0x12, 0x23…

光谱相机的光谱信息获取

光谱信息的获取方式主要依赖于不同分光技术和成像方法&#xff0c;将入射光分解为不同波长并记录其强度。以下是常见的光谱信息获取技术分类及原理&#xff1a; ‌1. 分光技术&#xff08;物理分解波长&#xff09;‌ ‌(1) 滤光片法‌ ‌原理‌&#xff1a;使用固定或可调滤…

免去繁琐的手动埋点,Gin 框架可观测性最佳实践

作者&#xff1a;牧思 背景 在云原生时代的今天&#xff0c;Golang 编程语言越来越成为开发者们的首选&#xff0c;而对于 Golang 开发者来说&#xff0c;最著名的 Golang Web 框架莫过于 Gin [ 1] 框架了&#xff0c;Gin 框架作为 Golang 编程语言官方的推荐框架 [ 2] &…

构建大语言模型应用:简介(第一部分)

本专栏聚焦大语言模型&#xff08;LLM&#xff09;相关内容的解析&#xff0c;通过检索增强生成&#xff08;RAG&#xff09;应用的视角来进行。 本系列文章 简介&#xff08;本文&#xff09;数据准备句子转换器向量数据库搜索与检索大语言模型开源检索增强生成评估大语言模…

PEmicro Multilink FX调试踩坑

文章目录 1.背景2 功能说明2.1 实时数据查看功能2.1 电压观测2.2 SWO功能 3 设置与支持 1.背景 既然使用了NXP的芯片&#xff0c;笔者就想使用一下它的专用调试器&#xff0c;这里先说一下&#xff0c;笔者是从朋友那里借了一个调试器&#xff0c;型号为PEmicro Multilink FX …

主流大模型采用的架构、注意力机制、位置编码等汇总表

记录下主流大模型的一些核心知识点&#xff0c;包括&#xff1a; 架构注意力机制位置编码归一化激活函数模型参数 表中的一些模型已经是很久之前的了&#xff0c;比如表中并未收入 DeepSeek V3 中使用的MLA的注意力机制。先占个位&#xff0c;后续如果有更新的汇总表再来更…

SpringBoot学习笔记3.27

目录 实战篇第二课 1.注册参数的校验&#xff1a; 学习过程中遇到的问题&#xff1a; 1.什么是正则表达式 2.怎么自定义异常&#xff1f; 1. 创建全局异常处理类 2. 定义响应对象 3. 使用 ExceptionHandler 4. 设置响应状态码 5. 返回统一响应 6. 测试全局异常处理 …

2025NCTF--Web

文章目录 Websqlmap-masterez_dashez_dash_revenge Web sqlmap-master 源码 from fastapi import FastAPI, Request from fastapi.responses import FileResponse, StreamingResponse import subprocessapp FastAPI()app.get("/") async def index():return File…

如何破解软件自动化测试框架的维护难题

破解软件自动化测试框架的维护难题应从优化测试用例设计、加强脚本的模块化与复用性、提高自动化测试工具的选择与使用效率等方面入手。其中&#xff0c;加强脚本的模块化与复用性尤为关键&#xff0c;通过提高脚本的模块化程度&#xff0c;可以显著降低后续维护成本&#xff0…

外星人入侵(python设计小游戏)

这个游戏简而言之就是操作一个飞机对前方的飞船进行射击&#xff0c;和一款很久之前的游戏很像&#xff0c;这里是超级低配版那个游戏&#xff0c;先来看看效果图&#xff1a; 由于设计的是全屏的&#xff0c;所以电脑不能截图。。。。 下面的就是你操控的飞船&#xff0c;上面…

iOS rootless无根越狱检测方案

不同于安卓的开源生态&#xff0c;iOS一直秉承着安全性更高的闭源生态&#xff0c;系统中的硬件、软件和服务会经过严格审核和测试&#xff0c;来保障安全性与稳定性。 据FairGurd观察&#xff0c;虽然iOS系统具备一定的安全性&#xff0c;但并非没有漏洞&#xff0c;如市面上…

LLM 优化技术(1)——Scaled-Dot-Product-Attention(SDPA)

在 Transformer 中抛弃了传统的 CNN 和 RNN&#xff0c;整个网络结构完全由Scaled Dot Product Attention 和Feed Forward Neural Network组成。一个基于 Transformer 的可训练的神经网络可以通过堆叠 Transformer 的形式进行搭建&#xff0c;Attention is All You Need论文中通…

基于音频驱动的CATIA动态曲面生成技术解析

一、技术背景与创新价值 在工业设计领域&#xff0c;参数化建模与动态仿真的结合一直是研究热点。本文提出的音频驱动建模技术突破了传统参数调整方式&#xff0c;实现了音乐节奏与三维曲面的实时动态交互。该技术可广泛应用于以下场景&#xff1a; ​艺术化产品设计&#xf…

5-管理员-维护权限

在“后台”-“人员管理”-“权限”下&#xff0c;通过不同的操作按钮&#xff0c;按照权限分组对权限进行设置。操作部分的按钮依次为 视野维护&#xff1a;设置该分组可以查看、访问的视图。权限维护&#xff1a;设置分组成员可以操作的具体动作等所有在禅道中涉及的权限。成…