在 Angular 2/4 中更改图像而不重新加载答案

【问题标题】：Change Image Without Reloading in Angular 2/4在 Angular 2/4 中更改图像而不重新加载
【发布时间】：2018-04-05 21:27:45
【问题描述】：

如何在不重新加载页面的情况下以角度更改图像？我有几个用户，用户的每一次变化也会改变形象。现在，我需要重新加载页面才能真正看到图像的变化。如何不再让它重新加载？

ts

 private image1 = `assets/images/image${localStorage.getItem('user_id')}.jpg`;

html

<img [src]="image1">

选择用户.ts

onSelectUser(form: NgForm) {
    const user = form.value.org;
    this.userService.selectedUser(user)
        .subscribe(
          data => {
            console.log(data);
            localStorage.setItem('user_id', data.user.id);

          },
          error => {
             console.log(error);
          });
  }

【问题讨论】：

image1的值在哪里改？
查看dataUrls
@Z.Bagley。就在本地存储中的 user_id 更改时。我还添加了上面的一些代码。
@theGleep。对不起？
如果将图像源设置为dataUrl，它将改变图像。您可以生成 dataUrl 作为 Ajax 调用的一部分，或者如果您想显示在本地计算机上选择的图片，则可以使用媒体 API。

标签： angular data-binding angular-services

【解决方案1】：

触发图像加载的一种简单方法是重新分配src 并触发更改检测，例如使用setTimeout：

this.userService.selectedUser(user)
    .subscribe(
      data => {
        localStorage.setItem('user_id', data.user.id);
        this.image1 = '';
        setTimeout(() => {
          this.image1 = '...jpg';
        });

      },
      ...

当然，这取决于缓存。如果图像 URL 保持不变并且服务器缓存策略允许它被缓存（通常这适用于图像），它仍然会从缓存中加载。在这种情况下，浏览器缓存应该被 URL 更改破坏，类似于 jQuery 处理 AJAX 请求的方式。

考虑到服务器可以处理向 URL 添加查询字符串的请求（通常这不是问题），这很简单：

this.userService.selectedUser(user)
    .subscribe(
      data => {
        localStorage.setItem('user_id', data.user.id);
        this.image1 = '...jpg?_=' + Date.now();
      },
      ...

【讨论】：

我会试试这个。谢谢你