如果使用 JavaScript 找不到图像，则显示默认图像

Show a default image if image is not found using JavaScript

如果找不到原始图像，则显示默认图像：

error向图像添加事件侦听器。
如果图像未成功加载，请更改其src属性。
或者，更改图像的alt属性。

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img id="img" src="does-not-exist.png" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const img = document.getElementById('img');

img.addEventListener('error', function handleError() {
  const defaultImage =
    'https://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp';

  img.src = defaultImage;
  img.alt = 'default';
});

我们

向元素添加了一个错误img事件监听器。

如果图像加载失败，error则会在启动加载的元素上触发一个事件，并onerror()调用图像上的处理程序。

如果将图像的src属性设置为不存在的图像，则会重新触发事件error，从而导致无限循环。

在错误处理函数中，我们将图像的src属性更新为默认图像并更改图像属性的值alt。

如果没有找到多个图像，则显示默认图像

如果找不到多个图像的原始图像，则需要显示默认图像：

使用方法选择图像querySelectorAll()。
使用方法遍历集合forEach()。
error为每个图像添加一个事件侦听器。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img src="does-not-exist.png" alt="banner" />
    <img src="does-not-exist.png" alt="banner" />
    <img src="does-not-exist.png" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const images = document.querySelectorAll('img');

images.forEach(img => {
  img.addEventListener('error', function handleError() {
    const defaultImage =
      'https://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp';

    img.src = defaultImage;
    img.alt = 'default';
  });
});

我们使用document.querySelectorAllimg方法来选择页面上的
所有元素。

该方法接受一个包含一个或多个有效 CSS 选择器的字符串。

我们传递给forEach()方法的函数

会随着NodeList.

在每次迭代中，我们将error事件侦听器添加到图像，以便在原始图像未加载时提供备份。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：