如何重新渲染这个 img 元素？

Posted 2023-02-22

【中文标题】如何重新渲染这个 img 元素？

【英文标题】：How do I rerender this img element?

【发布时间】：2016-05-17 07:02:34

【问题描述】：

我正在向 API 发送一个远程图像 URL。 API 进行一些图像处理，然后上传到 AWS S3。如果成功则返回response.data.attributes['image-url']中图片的url

我的控制器有：

imageUrl: Ember.computed.oneWay('model.imageUrl');

actions: 
  uploadImage(imageUrl) 
    Ember.$.ajax(
      url: `api/v1/users/1/update-image`,
      type: 'PUT',
      data: 
        data: 
          attributes: 
            'image-url': imageUrl
          
        
      
    )
    .success(response => 
      this.set('imageUrl', response.data.attributes['image-url']);
    )
    .error(response => 
      console.log(response);
    );
  

我的模板有：

<img src=imageUrl>

API 总是返回类似https://project1.imgix.net/products/1/image.jpg 的东西。即使image.jpg 是一个全新的图像。

Ember 不会重新渲染 img 元素。我必须手动刷新才能在浏览器上看到新图像。

我有什么方法可以告诉 Ember img 元素包含一个新图像并且应该重新渲染它？

我应该考虑其他方法吗？

编辑

所以我先尝试将imageUrl 设置为null，然后等待几秒钟设置实际的图片网址。似乎有效，但这是解决这种情况的正确方法吗：

.success(response => 
  this.set('imageUrl', null);

  Ember.run.later((() => 
    this.set('imageUrl', response.data.attributes['image-url'] + '?t=' + (new Date()).getTime());
  ), 3000);
)

我想知道这是否与在某个特定的 Ember 运行循环中运行 this.set 有关。

【问题讨论】：

查看 ember chrome 扩展中的控制器时，imageURL 是否设置正确？您是否尝试过直接设置model.imageURL 而不是imageURL？我还没有使用oneWay，所以我不确定你是否可以通过它设置值。

.success(response => this.set('imageUrl', response.data.attributes['image-url'] + '?t=' + (new Date()).getTime ()); )

@pbogut 这似乎适用于Ember.run.later 的组合。查看我的编辑

尝试在设置值后通知属性更改。 this.notifyPropertyChange('imageURL');

【参考方案1】：

要手动让 ember 知道属性已更改，请使用 notifyPropertyChange。这应该根据您的属性重新计算和绑定或计算属性。您可以将其用作this.notifyPropertyChange('imageURL');

【参考方案2】：

看起来oneWay 会阻止您设置该值。

computed.alias 别名 get 和 set，并允许双向数据流，computed.oneWay 只提供别名 get。该集合不会改变上游属性，而是使当前属性成为值集。这会导致下游属性永久偏离上游属性。

Docs

尝试改变：

this.set('imageUrl', response.data.attributes['image-url']);

到

this.set('model.imageUrl', response.data.attributes['image-url']);

【讨论】：

这似乎不起作用。但是，我确实注意到执行this.set('imageUrl', 'https://project1.imgix.net/products/1/foo.jpg'); 将重新渲染img 元素。请记住，foo.jpg 不存在。只是想看看实际的重新渲染是否适用于新的文件名。它的作用

因此，如果您将现有图像的 URL 传递给它（谷歌搜索图像并使用该 URL），那么它可以工作，只是不适用于 response.data.attributes['image-url']？也许检查该属性实际返回的内容？

只有在imageUrl的值完全改变时才有效

啊。对不起，我没看懂那部分。我没有意识到 URL 不是每个图像的唯一 URL。我想您将时间戳附加到它的解决方案会有所帮助。似乎您可以直接设置它，并且足以让微光意识到它已经改变并因此改变图像。无需 null 或延迟设置。