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

Working with an image error event in a Backbone view

本文关键字：图像 错误 事件 处理 视图      更新时间：2023-09-26

在主干视图使用的下划线模板中，我有一个图像。我正在尝试附加到错误事件，如果未找到原始图像，请更改图像源。

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

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 会显示"资产/图像/_noimage.gif"，但图像不会显示。我知道它存在，因为上面概述的第一种方法工作正常。

我在这里错过了什么？

我认为

你的问题就在这里：

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

在你的handleMissingImage函数中，你说：

i = $(evt.currentTarget);

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

相关文章：