在 jquery 中将 onerror 与动态创建的图像标签绑定

Question

我正在尝试将 img 的 onerror 与函数绑定。图片标签在 jquery

中是这样创建的

this._img1 = $("<img>");

这是函数

function imgError(image) {
  image.onerror = "";
  image.src = '/Content/img/placeholder-profile.jpg';
  return true;
}

现在我想将这个函数与 onerror 绑定... 我试过以下方法，但它们对我不起作用

this._img1.on("onError", "imgError(" + this._img1 + ")");

和

this._img1.prop("onError", "imgError(this)");

和

this._img1.error(function () {
    _img1.src = '/Content/img/placeholder-profile.jpg';
});

任何人都可以建议我如何实现它吗？

Answer 1

您只需使用 jquery 的 .error() 即可实现此功能。将事件处理程序绑定到 "error" JavaScript 事件。

Type: Function( Event eventObject )

触发事件时执行的函数。

错误事件被发送到文档引用并由浏览器加载的元素，例如图像。如果元素未正确加载，则会调用它。

例如，考虑一个包含简单图像元素的页面：

<img alt="Book" id="book">

事件处理程序可以绑定到图像：

$( "#book" )
  .error(function() {
    alert( "Handler for .error() called." )
  })
  .attr( "src", "missing.png" );

如果无法加载图像（例如，因为提供的图像不存在 URL），将显示警报：

调用了 .error() 的处理程序。

Answer 2

好吧，在我自己的例子中，我只是像这样为 onError 事件注册了一个全局侦听器：

$("img").on('error', function() {
  $(this).attr("src", "/path/to/my/default/placeholder-image.png");
});

这处理了所有损坏的图像链接。在您的情况下，您可以使用 either/both #id and/or .class 选择器缩小到特定元素。

jquery .on() 函数也适用于动态创建的元素。请参阅示例 here

bind onerror with dynamically created image tag in jquery