如何重新呈现此img元素？ [英] How do I rerender this img element?

问题描述

我正在向API发送一个远程图像网址。该API会进行一些图像处理，然后上传到AWS S3。如果成功，它将返回 response.data.attributes ['image-url']

I'm sending the API a remote image url. The API does some image processing, then uploads to AWS S3. If successful, it returns the url to the image in response.data.attributes['image-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 是一个全新的图像。

API always returns something like https://project1.imgix.net/products/1/image.jpg. Even if image.jpg is an entirely new image.

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

Ember does not rerender the img element. I have to manually refresh to see the new image on the browser.

有什么办法可以告诉Ember img 元素包含一个新图像，应该重新渲染它吗？

Is there any way I can tell Ember that the img element contains a new image and that it should re-render it?

我应该考虑使用其他方法吗？

Is there a different approach I should consider instead?

EDIT

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

So I tried setting imageUrl to null first, then wait a few seconds to set the actual image url. Seems to work, but is this the right way to tackle this situation:

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

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

我想知道这是否与在特定位置运行 this.set 有关系灰烬运行循环。

I wonder if this has anything to do with running this.set at some specific Ember run loop.

推荐答案

要手动让炭烬知道属性已更改，请使用 notifyPropertyChange 。这应根据您的财产重新计算余烬和绑定或计算财产。您可以将其用作 this.notifyPropertyChange（’imageURL’）;

To manually let ember know a property has changed, use the notifyPropertyChange. This should make ember recompute and bindings or computed propwerties based on your property. You can use it as this.notifyPropertyChange('imageURL');

这篇关于如何重新呈现此img元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！