当值更改时，Angular 4 刷新 <img src= ... >

Posted 2023-03-05

【中文标题】当值更改时，Angular 4 刷新 <img src= ... >

【英文标题】：Angular 4 refresh <img src= ... > when the value changes当值更改时，Angular 4 刷新 <img src= ... >

【发布时间】：2018-03-22 03:36:58

【问题描述】：

我正在使用 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);
    
    );
  

一切正常，除了尽管 currentphoto 值已更改并且数据库 url 已更新，html 仍显示前一个用户的图像及其烦人（如果我刷新页面它显示新的配置文件图像）..有什么办法可以让

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

检测 currentphoto 何时更改值并显示具有新 src 值的图像？？

【问题讨论】：

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

'currentphoto' 有新值吗？如果值相同（换句话说，图像更改但 url 保持不变），您将必须在 url 中添加一个随机数，作为查询字符串。比如***.com/questions/17394440/…

是的，抱歉，如果我没有说清楚。当前照片值包含标准图像网址，因此当用户更改配置文件图像时，当前照片值会更改

【参考方案1】：

你试过了吗：

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

【讨论】：

它应该工作，但没有。不知道为什么。角 10。

【参考方案2】：

尝试手动调用changedetection，

constructor(private cdRef: ChangeDetectorRef)

一旦你设置了图像

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

【讨论】：

我遇到了和 OP 一样的问题，可以确认这个解决方案可以解决。我的问题是 Angular 在任何时候都会有一个修复，或者这是期望的行为？

实际上，我还必须添加一个随机数，正如上面 Christian 的评论中提到的并在 ***.com/questions/17394440/… 中解释的那样。这就引出了随机数冲突的问题，这就引出了一个问题，是否有更好的解决方案？

【参考方案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

【参考方案4】：

这可能不再相关，但如果它可以帮助人们更快地解决这个问题，就在这里。

如果您想在图像更改后更新图像，请像这样编写您的 src： src='currentphoto?d=clock_tick'

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

它对我有用。