Angular 9 | Firebase 存储 |在 [object%20HTMLImageElement] 上获取 404 错误
Angular 9 | Firebase Storage | GET 404 error on [object%20HTMLImageElement]
我目前正在我的 Angular 项目中实现图片上传。我正在使用 Firebase 存储来存储这些图像。
在我的 HTML 文件中，我检查图像是否可用，如果可用，则显示它：
<img *ngIf="avatar" [src]="avatar" #avatar>
上传图片后设置头像。上传头像时，我试图将其作为预览显示到我的模板中。然后我得到这个错误：
GET http://localhost:4200/[object%20HTMLImageElement]
我已经试过了，运气不太好：
<img *ngIf="avatar" [attr.src]="avatar" #avatar>
<img *ngIf="avatar" [src]="avatar | async" #avatar>
看起来模板引用 #avatar 被用作值而不是另一个 avatar 变量（我假设它存在于 *.component.ts 文件中） .您可以重命名所有 #avatar 和它对 #avatarTemplate 之类的引用，或者相反 - 重命名 avatar 变量（在 .ts 中并保存 url）和它对 avatarUrl.
的引用
如果您在 .ts 中也有 avatar 作为模板引用变量，请创建一个新变量来保存 url（类似于 avatarUrl）并将其存储在那里.
编辑（抱歉，我没有足够的声誉发表评论）：虽然我从未遇到让 Angular 解析字符串 URL 的问题，@Silvermin 的回答也有效，但请确保您重命名 #avatar 及其引用或创建一个新变量来保存 url（以您方便的为准），然后尝试他们的答案:)
我目前正在我的 Angular 项目中实现图片上传。我正在使用 Firebase 存储来存储这些图像。
在我的 HTML 文件中，我检查图像是否可用，如果可用，则显示它：
<img *ngIf="avatar" [src]="avatar" #avatar>
上传图片后设置头像。上传头像时，我试图将其作为预览显示到我的模板中。然后我得到这个错误：
GET http://localhost:4200/[object%20HTMLImageElement]
我已经试过了，运气不太好：
<img *ngIf="avatar" [attr.src]="avatar" #avatar>
<img *ngIf="avatar" [src]="avatar | async" #avatar>
看起来模板引用 #avatar 被用作值而不是另一个 avatar 变量（我假设它存在于 *.component.ts 文件中） .您可以重命名所有 #avatar 和它对 #avatarTemplate 之类的引用，或者相反 - 重命名 avatar 变量（在 .ts 中并保存 url）和它对 avatarUrl.
如果您在 .ts 中也有 avatar 作为模板引用变量，请创建一个新变量来保存 url（类似于 avatarUrl）并将其存储在那里.
编辑（抱歉，我没有足够的声誉发表评论）：虽然我从未遇到让 Angular 解析字符串 URL 的问题，@Silvermin 的回答也有效，但请确保您重命名 #avatar 及其引用或创建一个新变量来保存 url（以您方便的为准），然后尝试他们的答案:)