Question

我正在使用Angular 5构建一个reddit客户端应用程序，其中包含以下代码片段

  <div class="post-image" *ngIf="!post.media && !post.is_self">
    <img class="image" [src]="postImage()">
  </div>

这是返回图片的函数：

  postImage(): string {
    return this.post.preview.images[0].variants.gif
      ? this.post.preview.images[0].variants.gif.source.url
      : this.post.preview.images[0].source.url;
  }

如您所见，img标记可以接收gif或常规图像文件的网址。 this.post变量是一个输入变量，只要用户选择新帖子就会更改。

现在，问题是，每当我在显示常规图像文件的两个帖子之间切换时，图像标签将重新渲染得很好，但是当我在两个显示.gif文件的帖子之间切换时，图片标记根本不会重新渲染，它会继续显示之前的.gif。

现在，我已经检查了呈现的代码，以查看图像src值在这种情况下是否实际发生了变化，图像src值确实发生了变化，但是.gif不会重新渲染。除了图像标记之外，呈现帖子的组件中的标题和其他所有内容都将更新。我不知道是什么原因导致了这个问题。

编辑：我认为添加比在Electron.js中运行此应用程序可能有帮助，可能与问题有关。

Answer 1

我认为它可能是缓存浏览器你可以看起来像这样

 postImage(): string {
    return this.post.preview.images[0].variants.gif
      ? this.post.preview.images[0].variants.gif.source.url + '&date=' + new Date().getTime();
      : this.post.preview.images[0].source.url + '&date=' + new Date().getTime();
  }

[src]属性更改后，Angular 5不会重新渲染img标记

1 个答案: