Обнаружение и реагирование на неудачную загрузку изображений и видео в Angular

Создавая приложение, позволяющее людям обмениваться изображениями и видео, я обнаружил повторяющуюся проблему.

Иногда изображения/видео, которое приложение пыталось загрузить, не было, и оно показывало это пользователю:

Итак, как и любой разработчик, обнаруживший ошибку, на которой не собирались акцентировать внимание, я залез в кроличью нору, чтобы посмотреть, как решить эту проблему!

Реакция на неработающие ссылки на изображения

Внутри элемента img у нас есть событие ошибки, которое генерируется при возникновении каких-либо проблем с загрузкой носителя. Благодаря этому мы можем настроить способ загрузки изображения, которое, как мы знаем, будет загружено для использования в качестве резервной копии.

Мы можем обнаружить это событие, выполнив следующие действия:

  <img
    alt="Main Image"
    *ngIf="!displayDefaultImage"
    [src]="imageValue"
    (error)="handleError()"
  >
  <img
    alt="Backup Image"
    *ngIf="displayDefaultImage"
    [src]="defaultImage"
  >

Теперь, когда мы добавили в HTML прослушиватель функций, мы можем использовать его в нашем машинописном коде:

... imports

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetection.OnPush,
})
export class MyComponent {
  displayDefaultImage = false;
  imageValue = '';   // Link to Image that may/may not load
  defaultImage = ''; // Link to Default Image that we know will load

  handleError() {
    this.displayDefaultImage = true;
  }
}

Реакция на неработающие ссылки на видео

Мы можем сделать это с помощью таких видео:

<video *ngIf="!displayDefaultVideo" width="320" height="240" controls>
   <source [src]="videoUrl" (error)="displayDefaultVideo = true" type="video/mp4">
   Your browser does not support the video tag.
</video>

<img alt="Default Image" [src]="defaultImage" *ngIf="displayDefaultVideo">

Самое интересное то, что мы можем иметь приблизительно один и тот же код, просто изменив часть image в именах переменных на, очевидно, video .

Код и рабочий пример

Если вам нужна копия кода, который я написал сегодня, вы можете щелкнуть здесь, чтобы просмотреть пример кода Stackblitz в этой статье.

Бонусный контент:

Если вы хотите прочитать об удивительной причине отображения после того, как контент не удалось загрузить:

ИЛИ о том, как реализовать визуальное представление контента до загрузки элемента, обязательно прочтите статью ниже!

Чтобы просмотреть мои ранее написанные статьи или связаться со мной, посетите мой сайт, нажав нажмите здесь!

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.