HTML img if error - JavaScript

在 HTML 中，<img> 标签用于显示图像。但如果该图像不存在，将会显示一个损坏的图像图标。为了防止出现这种情况，开发人员可以使用“onerror”属性来处理这个问题。

onerror属性

onerror 属性在图像加载时发生错误时触发。它可以被设置为一个 JavaScript 函数，该函数负责检测错误并采取必要的措施。

语法

<img src="image.jpg" onerror="myFunction()">

在这个例子中，如果图像加载失败，则 myFunction() 函数将被调用。

例子

以下是一个简单的示例，当指向图像的 URL 错误时，它会将图像的 src 属性更改为另一个 URL。

<img id="myImage" src="image.jpg" onerror="this.src='image-default.jpg'">

在这个例子中，如果原始图像无法加载，则会将 src 属性设置为 "image-default.jpg"，这应该是您的备用图像 URL。

JavaScript解决方案

除了在 HTML 属性中使用 onerror，您还可以使用 JavaScript 来处理图像加载错误的情况。

const img = new Image();
img.onload = function() {
  // Do something after image loads
}
img.onerror = function() {
  // Do something if image fails to load
}
img.src = "image.jpg";

在这个例子中，您可以设置 onload 和 onerror 函数来分别处理图像加载成功和失败的情况。

结论

在 HTML 中使用 onerror 属性和 JavaScript 解决方案可以帮助您处理图像加载时出现的错误，并提供备用图像 URL 或其他处理错误的方法。但是，对于网站的访问者来说，这往往是一个良好的体验，因为他们可能会在某些情况下看到一个损坏的图标。