Question

我已经尝试过通常的方法来更改损坏的链接图标（见下文），但它们似乎不适用于我的Ember应用程序。

目前，该模型从外部API获取数据。其中一个数据是链接URL。此链接网址（product_link）已插入模板中，具体如下：

<img {{bind-attr src=product_link}} />

这是把手{{#each}}循环的一部分。有几个链接引用了死URL，此时我无法自行修复URL。我想用我自己的一个替换通用的破碎图标链接。我怎么能这样做？

我尝试过的事情：

<img {{bind-attr src=favorite.product_image onError="this.onerror=null;this.src='/img/error.png';"}} /> 
//still shows the standard broken image icon

-

$('img').error(function(){
    $(this).attr('src', 'img/error.png');
});
//nothing happens if I include this in a called javascript file

有什么建议吗？

Answer 1

您可以创建类似@kaungst的组件，下面是具有其他属性errorSrc的组件的代码，如果src未加载，则会显示该组件的代码。

Here is the working demo.

App.GracefulImageComponent = Ember.Component.extend({
    tagName: 'img',
    attributeBindings: ['src', 'errorSrc'],

    didInsertElement: function() {
        this.$().on('error', function() {
          this.set('src', this.get('errorSrc'));
        }.bind(this));
    },

    willDestroyElement: function(){
        this.$().off();
    }  
});

{{graceful-image src=item.image errorSrc=../model.errorImage}}

Answer 2

Blessenm的解决方案很棒，但它修改了模型本身。我们不想这样做，因此我们创建了一个名为“safe-image”的组件，它为图像添加了一个“破碎”类。对于破碎的图像，我们可以使用css来删除或更改损坏的图像。

{{safe-image src=product_link}}

使用此组件代码：从'余烬'中导入Ember;

App.SafeImageComponent = Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['src'],
  classNameBindings: ['isBroken:broken'],

  isBroken: false,

  didInsertElement: function() {
    this.$().on('error', function() {
      this.set('isBroken', true);
    }.bind(this));
  },

  willDestroyElement: function(){
    this.$().off();
  } 
});

并添加此css以完全删除图像或将其替换为我们选择的一个：

img.broken {
  /* use this to show nothing: */
  display: none;
  /* or use this instead to replace the image: */
  content:url("http://imgur.com/SZ8Cm.jpg");
}

Answer 3

Blessenm的Dmitri Wolf的解决方案都非常有效。在错误回调中设置属性之前，只需确保组件未被销毁。

   didInsertElement: function() {
      this.$().on('error', () => {
        if (!this.get('isDestroyed') {
          this.set('src', this.get('errorSrc'));
        }
      });
    },

在Ember中更改损坏的链接图标

3 个答案: