如何在不重新加载页面的情况下更改图像的 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);
});
}
最佳答案
触发图像加载的一种简单方法是重新分配 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 - 在 Angular 2/4 中更改图像而不重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46921423/