如果找不到img src则显示替代图像 - 淘汰赛

Question

我有这段代码.

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

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

Answer 1

你可以做的是创建一个自定义绑定,让我们称之为safeSrc.

在此绑定中,您可以监听图像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));
    });
  }
};

然后,您可以像这样应用绑定:

<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('background-image', 'url(' + ko.unwrap(options.fallback) + ')');.

JS小提琴演示

在这里,你可以看到一切都在行动:https://jsfiddle.net/13vkutkv/2/

(编辑:我用Placehold.it替换了厚脸皮的热链接到Knockout JS徽标)

PS:根据您希望以后与元素交互的方式(与/更新绑定),您可能希望使用applyBindingsToNode(即Knockout-way),而不是src直接在DOM元素上操作属性.