Angular Ionic 3 как узнать, загружено ли изображение и есть ли какие-либо ошибки при получении пути к URL-адресу изображения - PullRequest
Новая
       15

Angular Ionic 3 как узнать, загружено ли изображение и есть ли какие-либо ошибки при получении пути к URL-адресу изображения

0 голосов
/ 16 ноября 2018

У меня есть приложение Ionic 3 , в которое я загружаю изображение с сервера API . В на стороне клиента я хочу знать, успешно ли загружено или загружено изображение, а также узнать, есть ли какие-либо ошибки при получении.

Вот пример, который я создал, используя чистый html с угловым шаблоном без js . 

<img hidden [src]="driverInfo?.user_avatar?.url | image:'original'" (load)="this.loadingImage = false">
<img [src]="driverInfo?.user_avatar?.url | image:'original'" *ngIf="!loadingImage" onError="this.src='assets/imgs/avatar-placeholder.png';" />

Когда я использую только вторую строку кода ниже и переношу событие (загрузка) туда. Сначала отображается путь onError, но это не потому, что изображение все еще загружается. Я хочу показать спиннер или загрузчик при загрузке изображения. Затем, когда изображение загружено, покажите исходный путь , если оно успешно , если не показано, путь в onError .

Так что я знаю, что этот код совсем не хорош. Вот почему я пытаюсь решить здесь. Я только что создал обходной код, который достигает моей цели, но не в хорошей практике.

Итак, в первой строке кода. Я отобразил скрытый HTML-файл . Назначение этого кода - запуск только в том случае, если изображение загружено, а во второй строке отображается фактическое изображение, если оно получено успешно, или отображается какая-либо ошибка или заполнитель изображения, если нет.

Так как я могу реорганизовать это, используя Angular JS ? Буду ли я использовать ViewChild с ElementRef для достижения этой цели?

Цените, если кто-то может помочь. Заранее спасибо.

1 Ответ

0 голосов
/ 16 ноября 2018

Я думаю, что вы можете достичь чего-то похожего на то, что вы хотите, используя следующую конструкцию: 

<img #thisImage src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" failedUrl="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" (error)="missingImage(thisImage.attributes.failedUrl.value)" onerror="this.src='https://via.placeholder.com/150'"/>

Вот стэкблиц для игры: https://stackblitz.com/edit/ionic-szz3nc

Короче:

  1. вы хотите назначить дополнительный атрибут, который будет дублировать исходное значение 'src', я использовал 'failedUrl' как таковой.Это связано с тем, что в случае ошибки src будет заменен на ваш безопасный URL-адрес заполнителя.

  2. Теперь onerror - вы хотите заменить ошибочный URL-адрес заполнителем

  3. используя связывание (ошибка), вы можете вызвать метод и передать все, что вам нужно, в функцию ts, чтобы действовать дальше (как я использовал, чтобы «сообщать» о таких пропущенных изображениях).

Дайте мне знатьесли это полезно.

Обратите внимание, что этот тип кода является очень рискованным, так как если вы допустите ошибку, это может привести к возникновению ошибки (например, если ваш безопасный URL-адрес заполнителя также нигде не указывает).

...