Angular 10 - определить, существует ли изображение только на стороне клиента, иначе изображение по умолчанию - PullRequest
Новая
       42

Angular 10 - определить, существует ли изображение только на стороне клиента, иначе изображение по умолчанию

1 голос
/ 03 августа 2020

Мне нужно знать, как определить, существует ли изображение, только на стороне клиента, с помощью Angular. Я слышал, что мы можем установить изображение по умолчанию с помощью функции тайм-аута, но я не знаю, как отловить ошибки 404.

Мне нужно написать код только для getResourceImg (), как * 1003 В руководстве по стилю *angular указано:

resource-ui.component.ts 

  @Input() resource: IResourcePublished;
  // ...

  resourceImgUrlLogoDefault: string = 'assets/images/logo_default.png';
  resourceImgUrl: string;

  constructor(private modalService: NgbModal) {}

  ngOnInit(): void {
    this.resourceImgUrl = this.getRessourceImg(this.resource);
  }

  getResourceImg(resource: IResourcePublished): string {

    return 'assets/images/screen-resources/' + resource.id + '.png';
  }

  //..

Вот шаблон (сгенерированный с помощью *ngFor="let resource of resources" ):

resource-ui.component. html

<div class="card" [style.background]="categoryColor">
  <div class="card-header" ngbTooltip="More infos" (click)="openResourceDetails()">
    <img
    class="layout-img img-fluid"
    [src]="resourceImgUrl"
    alt="resource-{{resource.id}}"
    />
  </div>
  <!-- ... --> 
</div>

1 Ответ

2 голосов
/ 03 августа 2020

Вы можете создать повторно используемую директиву, например:

fallback-img.directive.ts 

import { Directive, Input, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: 'img[fallback]'
})
export class FallbackImgDirective {
  @Input()
  @HostBinding('src')
  src: string;

  @Input() fallback: string;

  @HostListener('error')
  onError() {
    this.src = this.fallback;
  }
}

Использование 

<img src="http://unknown/404.jpg" fallback="https://via.placeholder.com/150" alt="">

Ng-ход Пример

...