Question

如何在不重新加载页面的情况下更改角度图像？我有几个用户，用户的每个更改也都有图像更改。现在，我需要重新加载页面以实际看到图像更改。怎么不让它重新加载？

TS

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

HTML

<img [src]="image1">

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

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

1 个答案: