当前位置：首页 > news >正文

img 的 onerror属性

news 来源：原创 2025/5/20 1:40:35

`名词解释：`

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