如何在 jQuery 中自动修复损坏的图片?
在本教程中，我们将学习如何使用 jQuery 自动修复损坏的图片。您是否曾在浏览网站时，看到过损坏的图片，而这些网站只显示带有损坏图片默认图标的替代文本?您不觉得这种用户体验很差吗?显然，确实如此。
因此，在开发应用程序或网站时，您应该编写一些 JavaScript 或 jQuery 代码，使其能够自动替换损坏的图片。
在这里，我们将学习 2 到 3 种使用 jQuery 自动修复损坏图片的不同方法。
在 HTML 的 <img> 标签中使用 onerror 事件
我们可以将这些事件与 HTML 标签一起使用。当 HTML 元素发生任何错误时，都会触发 onerror 事件。在我们的例子中，如果图片 URL 损坏，就会触发 onerror 事件，我们可以为损坏的图片设置新的 URL。
用户应遵循以下语法，使用 jQuery 中的 onerror 事件自动修复损坏的图片。
语法
// 带有源 URL 的图片
<imgsrc = "<Image URL>"onerror = "solveError(this);"/>
<script>
function solveError(currentImage) {
currentImage.src = "<New Image URL>";
}
</script>
在上述语法中，当图片 URL 出现错误时，我们会调用"solveError()"函数。该函数将修复图片损坏的 URL。
示例
在下面的示例中，我们使用 HTML"<img>"标签创建了两个图片元素。这两个图片元素都包含源 URL，但第二个图片的源 URL 已损坏。此外，我们还为这两个图片元素添加了 onerror 事件。
当<img> 标签内出现错误时，它将调用"solveError()"函数，并且我们已将当前元素的引用作为函数的参数传递。在 solveError() 函数内部，我们正在更改参数中接收的参考图片的"src"属性的值。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery each() method. </i> </h2> <img src = "https://www.tutorialspoint.com/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").each(function () { if ( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == "uninitialized" ) { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); } }); </script> </body> </html>
在上面的输出中，用户可以看到第一张图片是原始图片，而第二张图片损坏，因此显示的是替换图片。
使用 jQuery 的 .on() 方法自动修复损坏的图片
我们可以在 jQuery 中对任何 HTML 元素调用".on()"方法。基本上，on() 方法用于检测引用元素上的单个或多个事件。
用户可以按照以下语法使用 on() 方法检测图像元素的错误。
语法
$("img").on("error", function () {
// 更改损坏图像 URL 的代码
$(this).attr("src","https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj"
);
});
在上述语法中，我们在每个' <img> '元素上调用了 on() 方法。此外，当图片出现错误时，我们调用回调函数来替换损坏的图片 URL。
参数
"saveAs"函数接受两个参数。
img − 这是一个选择器。用户可以保留它来修复所有损坏的图片。此外，用户可以设置需要触发特定事件的图片的 ID 或类。
Error − 这是一个事件名称。它将检测所选图像的"错误"。
function() { } − 它是一个在所选图像发生任何错误时执行的函数。
示例
下面的示例中创建了两个图像元素。一个包含原始 URL，另一个包含损坏的图像。
在 jQuery 内部，我们使用 on() 方法检测每个图像上的错误，并在发生错误时调用回调函数。回调函数会替换发生错误的引用图像的 URL。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery on() method. </i> </h2> <img src = "https://www.tutorialspoint.com/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").on("error", function () { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); }); </script> </body> </html>
使用 jQuery 的 .each() 方法自动修复损坏的图片
在此方法中，我们使用了 jQuery 的 each() 方法迭代所有选定的图片。我们将检查每张图片的原始宽度。如果任何图片的原始宽度为 0 或未定义，则表示图片 URL 已损坏，可以进行替换。
用户应遵循以下语法迭代每个选定的图片并检查损坏的图片 URL。
语法
// 迭代每个图片元素
$("img").each(function () {
// 检查图片的原始宽度是否为 0 或未定义，然后替换图片 URL
if (
(typeof this.naturalWidth != "undefined" &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
){
$(this).attr("src","https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj");
}
});
在上述语法中，我们根据替换损坏的图片 URL 的值，检查图片的自然宽度类型、自然宽度本身以及图片的就绪状态。
属性
typeof − 返回变量或任何属性的类型。
naturalWidth − 返回图片的原始宽度。即使用户更改了图像的宽度，它也会返回原始宽度。
readyState - 根据图像是否已加载到文档中，返回布尔值。
示例
以下示例演示了如何使用 jQuery 的 each() 方法遍历每个图像来自动修复损坏的图像。它只是使用 jQuery 的 attr() 方法替换每个损坏图像的"src"属性值。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery each() method. </i> </h2> <img src = "https://www.tutorialspoint.com/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").each(function () { if ( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == "uninitialized" ) { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); } }); </script> </body> </html>
在本教程中，我们学习了三种使用 jQuery 替换损坏图片的方法。此外，用户还可以使用 hide() 方法在 jQuery 中隐藏损坏的图片。
建议使用第一种方法，因为它最简单，用户可以根据需求使用其他方法。
