javascript - 在 Ember 中更改断开的链接图标

Question

我尝试了一些常规方法来更改损坏的链接图标(见下文)，但它们似乎在我的 Ember 应用程序中不起作用。

目前，该模型从外部 API 获取数据。其中一条数据是链接 url。此链接 url (product_link) 被插入到模板中，具体在此时:

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

这是 handlebars {{#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}}