Javascript 来自外部站点的图像的回退img src

我需要显示来自其他站点的图像，并且有一个带有引用图像URL的

imgsrc

属性的视图模型。然后我有以下HTML绑定：

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

问题是，如果绑定图像是外部的，那么如果外部站点出现问题，我可能会得到404或500响应；因此，我想显示一个后备映像，以防我们无法加载映像

---

如何使用KnockoutJS实现这一点？

您可以使用

onerror

事件

HTML:

---

示例：

直接从VM使用DOM是一种反模式，如果您需要自定义访问DOM，创建绑定处理程序是一种方法。我的情况不同，因为我无法控制映像是否可访问，因为映像位于外部，最后，@gkatai建议的一个错误解决了这个问题，这个问题被标记为的重复，这是一个完全不同的问题——基于另一个属性隐藏图像。投票决定重新开放。

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

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);