javascript - 如果未找到 img src，则显示替代图像 - 挖空

Question

我有这段代码。

<img data-bind="attr: {src: 'imagePath'}, style: { 'background-image': 'url('imagePath')' }" class="img-responsive">

问题是它显示了两个图像。一个是来自 src 的图像，另一个是来自 background 图像的图像。我的目标是在 src 图像不可用时启用 background 图像。

Answer 1

您可以做的是创建一个自定义绑定(bind)，我们称它为safeSrc。

在此绑定(bind)中，您会监听图像的 load 和 error 事件 - 如果图像加载成功则渲染图像，否则渲染回退。

在实践中，它可能如下所示:

ko.bindingHandlers.safeSrc = {
  update: function(element, valueAccessor) {
    var options = valueAccessor();
    var src = ko.unwrap(options.src);
    $('<img />').attr('src', src).on('load', function() {
      $(element).attr('src', src);
    }).on('error', function() {
      $(element).attr('src', ko.unwrap(options.fallback));
    });
  }
};

然后，您可以像这样应用绑定(bind):

<img alt="Foo" data-bind="safeSrc: {src: imageObservable, fallback: 'https://example.com/fallback.png'}" />

请注意，这假设您正在使用 jQuery - 但您可以轻松重写事件监听器。

最后，我还想说你应该渲染一个不同的 src 而不是背景图像 - 除非你有特定的理由需要一个？

无论哪种方式，您只需将行 $(element).attr('src', ko.unwrap(options.fallback)); 更改为 $(element).css ('背景图片', 'url(' + ko.unwrap(options.fallback) + ')');。

JS fiddle 演示

在这里，您可以看到所有的操作:https://jsfiddle.net/13vkutkv/2/

(编辑:我用 Placehold.it 替换了指向 Knockout JS Logo 的厚颜无耻的热链接)

P.S.:根据您将来希望如何​​与元素交互(与绑定(bind)交互/更新绑定(bind))，您可能希望使用 applyBindingsToNode(即 Knockout 方式)，而不是操纵src 属性直接在 DOM 元素上。