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

Question

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

ts

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

html

<img [src]="image1">

select user.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);
          });
  }

Answer 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();
      },
      ...