javascript - 为来自外部站点的图像回退 img src

Question

我需要显示来自其他站点的图像，并且有一个带有引用图像 URL 的 imgsrc 属性的 View 模型。然后我有以下 HTML 绑定(bind):

<img data-bind="attr: { src : imgsrc }" />

问题是绑定(bind)图像是外部的，如果外部站点有问题，我可能会收到 404 或 500 响应；因此，我想显示备用图像，以防我们无法加载图像。

如何使用 KnockoutJS 实现这一点？

Answer 1

您可以使用 onerror 事件。

HTML:

<img id="pic" data-bind="attr: { src : imgsrc }" />

JavaScript:

var myViewModel = {
    imgsrc: ko.computed(function () {
        var pic = document.getElementById('pic');
        pic.onerror = function () {
            pic.src = 'fallback image url';
        };
        return 'image url';
    }, this)
};

ko.applyBindings(myViewModel);

示例:http://jsfiddle.net/R4SV7/1/