docs
angular
Diretivas
Img Fallback

ImgFallbackDirective

standalone: true

A diretiva permite adicionar um fallback para imagens que falham ao carregar. Se a imagem não for carregada corretamente, a diretiva substituirá a imagem pelo URL de fallback ou uma imagem SVG padrão, cinza e vazia.

Uso

Importe a diretiva ImgFallbackDirective, adicione o atributo fallback à tag img.
O valor do atributo deve ser o URL da imagem de fallback.
Se o valor não for fornecido, a diretiva usará uma imagem SVG cinza e vazia como fallback.

import { Component } from "@angular/core";
import { ImgFallbackDirective } from "@burand/angular";
 
@Component({
  standalone: true,
  selector: "app-post",
  template: `
    <img src="image-url.jpg" fallback />
 
    <img src="image-url.jpg" fallback="fallback-image-url.jpg" />
 
    <img src="image-url.jpg" fallback="fallback-image-url.jpg" [retry]="2" />
 
    <ion-img src="image-url.jpg" fallback />
 
    <ion-img src="image-url.jpg" fallback="fallback-image-url.jpg" [retry]="2" />
  `,
  imports: [ImgFallbackDirective],
})
export class PostComponent {}
ChangelogApiError