Angular 4 当值改变时刷新 <img src={{ ... }} >

Question

我正在使用Angular 4，我有一个组件，我想更改我的用户当前照片..所以显示当前用户照片的HTML代码如下..

我会尽力:

我用 Angular 4, 想在组件中修改用户头像。目前展示用户头像的 HTML 代码如下：

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

currentphoto 包含当前用户的照片 URL，我从 Firebase 获取它。然后，我展示了一组照片供用户选择，并使用表单更改其个人资料照片。提交代码如下，可以正常工作：

    onSubmit = function(form) {
    this.photoUrl = form.photoUrl;
    firebase.database().ref("users/"+this.authService.cusername+"/photo").update({
      url: form.photoUrl
    }).then(()=>{
      this.currentphoto = this.authService.photourl;
      console.log("currentphoto:"+this.currentphoto);
    }
    );
  }

除了当前照片的值已更改并更新了数据库URL，一切都正常，但是HTML仍然显示以前用户的图像，这很烦人（如果我刷新页面，则显示新的个人资料图像）。有没有办法可以使其更改？

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

当检测到currentphoto值发生改变时，显示具有新src值的图像？

- Vasilis Michail

---

那不应该是[src]="currentphoto"吗？ - jonrsharpe

'currentphoto' 是否有新值？如果值相同（换句话说，图像更改但URL保持不变），则必须将随机数作为查询字符串添加到URL中。例如：https://stackoverflow.com/questions/17394440/add-random-variable-after-image-url-with-javascript - Christian Benseler

抱歉，如果我没有表达清楚。currentphoto值包含标准图像URL，因此当用户更改个人资料图像时，currentphoto值会更改。 - Vasilis Michail

Answer 1

尝试手动调用changedetection。

constructor(private cdRef: ChangeDetectorRef){

}

设置图片之后

 this.currentphoto = this.authService.photourl;
 this.cdRef.detectChanges();

- Sajeetharan

---

我遇到了与 OP 相同的问题，并确认此解决方案解决了它。我的问题是，Angular 是否会在任何时候修复这个问题，还是这是期望的行为？ - Ben

实际上，我也不得不像克里斯蒂安在上面的评论中提到并在https://stackoverflow.com/questions/17394440/add-random-variable-after-image-url-with-javascript中解释的那样添加一个随机数。这带来了随机数冲突的问题，这就引出了一个问题：是否有更好的解决方案？ - Ben

Answer 2

这可能已经不再相关了，但如果可以帮助人们更快地解决问题，这里有一个解决方法。

如果您想在更改后更新图像，请将src写成以下格式：
src='{{currentphoto}}?d={{clock_tick}}'

在首次加载组件时初始化您的时钟滴答声（我使用Date.now()），并在更新图像后再次初始化。这将告诉您的浏览器您已更新图像，并将重新加载它。

对我有用。

- Jean-Francois Bertrand

Answer 3

如果没有你组件/服务的完整代码，很难知道问题出在哪里，但最有可能的是这一行：

onSubmit = function(form) {

可能是'this'值的问题。在此行下面（函数内部）插入console.log(this)，检查'this'是否引用组件实例或窗口。

尝试使用箭头函数：

onSubmit = form => {
 //do what you need here, call the service, etc...
 //and then set the this.currentphoto
}

- Christian Benseler

Answer 4

你试过这个吗：

<div class="profilphoto">
        <img [src]="currentphoto" >
</div>

- asmmahmud

---

它“应该”可以工作，但实际上却不能。不知道为什么。Angular 10。 - LosManos

src={{currentphoto}}和[src]="currentphoto"是相同的，因此无论哪种情况都不起作用。请查看我的答案。 - Vikram Sapate