角 9 | Firebase 存储 | [object%20HTMLImageElement] 上的 GET 404 错误答案

【问题标题】：Angular 9 | Firebase Storage | GET 404 error on [object%20HTMLImageElement]角 9 | Firebase 存储 | [object%20HTMLImageElement] 上的 GET 404 错误
【发布时间】：2020-11-02 14:42:22
【问题描述】：

我目前正在我的 Angular 项目中实现图像上传。我正在使用 Firebase 存储来存储这些图像。

在我的 HTML 文件中，我检查图像是否可用，如果可用，则显示它：

<img *ngIf="avatar" [src]="avatar" #avatar>

头像是在我上传图片时设置的。上传头像后，我试图将其作为预览显示到我的模板中。然后我得到这个错误：

GET http://localhost:4200/[object%20HTMLImageElement]

头像变量只是 URL 的一个字符串：https://firebasestorage.googleapis.com/v0/b/openix-crm.appspot.com/o/contact_images%2F2014-07-24%2021.23.45.jpg?alt=media&token=90018c6d-3316-4db4-911b-dd7d204c84aa

我已经尝试过了，但运气不佳：

<img *ngIf="avatar" [attr.src]="avatar" #avatar>
<img *ngIf="avatar" [src]="avatar | async" #avatar>

【问题讨论】：

标签： angular firebase file-upload firebase-storage asyncfileupload

【解决方案1】：

看起来模板引用 #avatar 被用作值，而不是另一个 avatar 变量（我假设它在 *.component.ts 文件中）。您可以重命名所有 #avatar，它是对 #avatarTemplate 之类的引用，或者相反 - 重命名 avatar 变量（在 .ts 中并保存 url）及其对 avatarUrl 的引用。

如果您在 .ts 中也有 avatar 作为模板引用变量，请创建一个新变量来保存 url（类似于 avatarUrl）并将其存储在那里。

编辑（对不起，我没有足够的声誉来发表评论）：虽然我从来没有遇到过让 Angular 解析字符串 URL 的问题，@Silvermin 的答案也有效，但请确保重命名 #avatar 和它的引用或创建一个新变量来保存网址（以您方便的为准），然后尝试他们的答案:)

【讨论】：