在主干视图中处理图像错误事件

Question

在骨干视图使用的下划线模板中，我有一个图像。 我试图附加到错误事件并在未找到原始图像的情况下更改图像源。

基于这个类似的问题 ，我采用了以下方法：

render: function() { 
    var self = this;

    this.$el.html( this.template( { person: this.model.toJSON() } ) ); 

    this.$el.find('img.employee-image').on('error', function(evt) { this.src = "assets/images/_noimage.gif"; });

    return this;
}

这可以很好地工作，但是如果我尝试将src的更改移至视图中的单独方法，则将调用该方法，但图像不会更改。

render: function() { 
    var self = this;

    this.$el.html( this.template( { person: this.model.toJSON() } ) ); 

    this.$el.find('img.employee-image').on('error', function(evt) { self.handleMissingImage(evt); });

    return this;
},

handleMissingImage: function(evt) {
    // This by itself did not work.
    // this.src = "assets/images/_noimage.gif";

    var i = $(evt.currentTarget);
    i.src = "assets/images/_noimage.gif";
    console.log(i.src);
}

注销src将显示“ assets / images / _noimage.gif”，但图像不会出现。 我知道它的存在是因为上面概述的第一种方法效果很好。

我在这里想念什么？

Answer 1

我认为您的问题就在这里：

i.src = "assets/images/_noimage.gif";

在handleMissingImage函数中，您说：

i = $(evt.currentTarget);

所以i是一个jQuery对象，而不是原始的DOM元素。 这意味着您想说i.attr('src', ...)来更改src属性，或者根本不用包装evt.currentTarget 。