img 标签事件 onerror 图片加载错误

最新推荐文章于 2025-03-28 20:47:51 发布

原创最新推荐文章于 2025-03-28 20:47:51 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

184 篇文章

订阅专栏

HTML/HTML5

26 篇文章

订阅专栏

本文介绍如何使用img标签的onerror事件处理图片加载失败的问题，通过设置备用图片路径防止页面显示碎片图标，并提供代码示例避免因备用图片路径错误导致的死循环。

img标签中的src图片加载失败会出现一个碎片图标

借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。
解决方法：可以使用一张提示错误的图片代替显示不了的图片。
代码如下：

<h5>图片路径不正确 备用图片路径正确</h5>
<img src="../../img/75.jpg" alt="这是一张图片3" onerror="javascript:this.src='../../img/785f9374808c998283b1c403b2959254.jpg';">

备用图标路径不正确则会继续触发 onerror事件，导致死循环

解决方法：控制它不循环
代码如下：

<h5>图片路径不正确 备用图片路径不正确 解决</h5>
<img src="../../img/75.jpg" alt="这是一张图片5" onerror="imgerrorfun();">
<script>
    function imgerrorfun(){
        var img = event.srcElement; 
        img.src="../../img/124035-1526272835360d.jpg"; 
        img.onerror = null; //控制不要一直跳动 
    }
</script>

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img标签事件</title>
</head>
<body>
    <h5>图片路径正确</h5>
    <img src="../../img/152441-15541898817e75.jpg" alt="这是一张图片1" >
    <br>
    <h5>图片路径不正确</h5>
    <img src="../../img/75.jpg" alt="这是一张图片2" >
    <br>
    <h5>图片路径不正确 备用图片路径正确</h5>
    <img src="../../img/75.jpg" alt="这是一张图片3" onerror="javascript:this.src='../../img/785f9374808c998283b1c403b2959254.jpg';">
    <br>
    <h5>图片路径不正确 备用图片路径不正确</h5>
    <img src="../../img/75.jpg" alt="这是一张图片4" onerror="javascript:this.src='../../img/54.jpg';">
    <br>
    <h5>图片路径不正确 备用图片路径不正确 解决</h5>
    <img src="../../img/75.jpg" alt="这是一张图片5" onerror="imgerrorfun();">
    <script>
        function imgerrorfun(){
            var img=event.srcElement; 
            img.src="../../img/124035-1526272835360d.jpg"; 
            img.onerror=null; //控制不要一直跳动 
        }
    </script>
</body>
</html>