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

Fallback img src for images from external sites

本文关键字：回退 img src 图像 外部 站点      更新时间：2023-09-26

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

<img data-bind="attr: { src : imgsrc }" />
问题是，由于绑定图像是外部的，

如果外部站点出现问题，我可能会得到 404 或 500 响应;因此，我想显示一个回退图像，以防我们无法加载图像。

如何使用KnockoutJS实现这一点？

您可以使用

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/

相关文章：