名词解释:
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.jpg
,this.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 属性的基本工作机制,它为处理图片加载失败的情况提供了一种有效的方法,可以提升用户体验。