Angular 9 | Хранилище Firebase | ПОЛУЧИТЬ ошибку 404 для [объект% 20HTMLImageElement]

Question

В настоящее время я загружаю изображения в свой проект Angular. Я использую Firebase Storage для хранения этих изображений.

В моем 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>

Answer 1

Похоже, что ссылка на шаблон #avatar используется в качестве значения вместо другой avatar переменной (которая, как я предполагаю, есть в файле * .component.ts). Вы можете переименовать все #avatar и ссылки на что-то вроде #avatarTemplate или наоборот - переименовать переменную avatar (которая находится в .ts и содержит URL-адрес) и ее ссылки на avatarUrl.

Если у вас есть avatar в .ts в качестве ссылочной переменной шаблона, создайте новую переменную для хранения URL-адреса (что-то вроде avatarUrl) и сохраните ее там.

EDIT (Извините , У меня недостаточно репутации, чтобы сделать комментарий): Хотя я никогда не сталкивался с проблемой, позволяющей Angular анализировать строковые URL-адреса, ответ @ Silvermin также работает, но убедитесь, что вы переименовываете #avatar и его ссылки или создаете новую переменную для хранения URL-адреса (в зависимости от того, что вам удобно), затем попробуйте их ответ:)