Question

我试图在我的html文件中显示更新的图像，但经过大量的努力没有运气。因为在我的打字稿文件中，imageUrl正在更新，我在我的控制台中检查过，但是html文件没有更新图像。

我从我的研究中发现 ng-src 将解决问题，但我收到此错误导致我的任务变得复杂，错误是：

Can't bind to 'ng-src' since it isn't a known property of 'img'

由于我再次进行了研究，并且知道这个问题可以通过这个解决。

<img [attr.src]="imageUrl"/>

因为这解决了我的问题，因为错误消失了，但是当我试图获得更新的结果时，没有运气。

HTML

<div class="col-12 col-lg-5 pb-3">
  <img [src]="imageUrl" alt=""/>
</div>

打字稿

ngOnInIt(){
  this.currentUser.getUser((user) => {
    console.log("user has been fetched", user)

    if(this.downloadUrl == null || this.downloadUrl == "")
      this.imageUrl = user.image_url;
    else
      this.imageUrl = this.downloadUrl;

    console.log(this.imageUrl);
  })
}

注意：在我的控制台中，网址实际上已更新，但未反映在我的HTML中。

这是我的控制台日志：

http://s3.amazonaws.com/nightlightme/users/images/000/000/026/medium/profile_picture_2Fmy_img.jpg?1515500453
profile-page.component.ts:43 Upload is 0% done
profile-page.component.ts:43 Upload is 30.6248714929251% done
profile-page.component.ts:43 Upload is 74.04998224265874% done
profile-page.component.ts:43 Upload is 91.87461447877531% done
profile-page.component.ts:43 Upload is 100% done
profile-page.component.ts:52 https://firebasestorage.googleapis.com/v0/b/nightlight-cfc85.appspot.com/o/profile_picture%2Fmy_dp.jpg?alt=media&token=fa524e3e-2b06-400e-bc21-16f1901c0909

您可以看到第一个网址是前一个网址的网址，现在最后一个网址网址已经更新。但是我的html图像没有改变。

任何帮助都将受到高度赞赏。感谢

EDITS

我已经做了一些更多的研究并且对这些解决方案有所了解，有些人让我感到困惑，并且无法弄清楚我的打字稿文件中该做什么。基本上一小时的需要是仅在我的打字稿文件中刷新图像，我通过绑定尝试这样做，但没有运气。

Auto refresh the image only in html using Javascript

尝试使用Date进行初始化，以便将更新后的结果反映在html中，但没有运气。

imageUrl:string= "" + new Date().getTime();

并将所有代码保持为相同。但没有得到任何结果

Answer 1

ng-src 是 angular1.x 语法，只需使用angular2的 src 属性

<img src="{{imageUrl}}" alt=""/>

或者你也可以这样做，

<img [src]="imageUrl" />

还将条件包含在括号内，

if(this.downloadUrl == null || this.downloadUrl == ""){
    this.imageUrl = user.image_url;
}
  else
{
   this.imageUrl = this.downloadUrl;
}

使用Angular2更新html中的Image src

1 个答案: