我需要显示来自其他站点的图像,并且具有带有引用图像URL的imgsrc属性的视图模型.然后我有以下HTML绑定：@H_301_1@

@H_301_1@

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

问题是如果绑定图像是外部的,如果外部网站出现问题,我可以获得404或500响应;因此,我想显示一个后备图像,以防我们无法加载图像.@H_301_1@

如何使用KnockoutJS实现这一目标？@H_301_1@

最佳答案@H_301_1@

您可以使用onerror事件.@H_301_1@

HTML：@H_301_1@

@H_301_1@

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

JavaScript的：@H_301_1@

@H_301_1@

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/@H_301_1@