如何处理html5图片上的onerror答案

【问题标题】：How to handle onerror on html5 picture如何处理html5图片上的onerror
【发布时间】：2017-06-26 06:05:13
【问题描述】：

我发现了这个问题：jQuery/JavaScript to replace broken images 它非常适合 img 标签，但是当我尝试将它用于图片标签时，它不起作用。

首先我尝试捕获源失败：

    $('picture source').on('error', function () {
        loadBackupImage($('picture source').first());
    });

并且错误没有触发。

然后我尝试在备用 img 标签上获取错误。但我无法获得具体的来源 - srcset 属性。

另外，当我更改 img.src 时。它仍然在浏览器上返回错误。即便如此，我认为 img.src 是正确的。

谢谢！！

【问题讨论】：

标签： html image onerror

【解决方案1】：

我找到了方法：标签图片作为 img 触发 onerror，并且 img 有兄弟姐妹 - 来源。

$("img").on('error', function () {
    $(this).siblings("source").attr("srcset","mybackup.jpg")
});

更复杂的一点：我将每个源的差异图像存储在属性 data-image 中，并显示正确的备份图像

$("img").on('error', function () {
    var image = $(this).siblings("source").attr("data-image");
    $(this).siblings("source").attr("srcset",image);
});

希望对您有所帮助。

【讨论】：