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

В настоящее время я выполняю загрузку изображений в моем проекте 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>

firebase firebase-storage angular file-upload asyncfileupload
person Bjorno    schedule 13.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

РЕДАКТИРОВАТЬ (извините, у меня недостаточно репутации, чтобы сделать комментарий): хотя я никогда не сталкивался с проблемой, позволяющей Angular анализировать строковые URL-адреса, ответ @ Silvermin также работает, но убедитесь, что вы переименовали #avatar и его ссылки или создали новая переменная для хранения URL-адреса (в зависимости от того, что вам удобно), затем попробуйте их ответ :)

person Tashi Tobgay Dakpa    schedule 13.07.2020