Objetivo : cargar una imagen con una fuente dinámica. Si no se encuentra ninguna imagen, cargue una imagen de marcador de posición en su lugar.
Esto debería demostrar lo que estoy tratando de hacer, pero no sé cómo establecer condicionalmente validImage en función de si el primer img src es válido.
<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="..."> <img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="..."> validImage debe ser true si src="./app/assets/images/{{image.ID}}.jpg" devuelve una imagen. De lo contrario, devolvería false y solo debería mostrarse la segunda etiqueta img .
Hay soluciones obvias, como almacenar una lista de todas las fuentes de imágenes válidas, pero creo que hay una mejor manera de lograr esto.
Cualquier sugerencia sobre la mejor manera de implementar esto en Angular2 sería muy apreciada.
La mejor manera de manejar enlaces de imágenes rotas es usar el evento onError para la etiqueta <img> :
<img class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" onerror="this.src='./app/assets/images/placeholder.jpg';" alt="..." /><img [src]="pic" (error)="setDefaultPic()">Y en algún lugar de su clase de componente:
setDefaultPic() { this.pic = "assets/images/my-image.png"; }Me encontré con una necesidad similar. Quería establecer de forma predeterminada un píxel transparente de 1X1 si una URL de img era nula o devolvía un error (404, etc.).
import { Directive, Input } from '@angular/core'; @Directive({ selector: 'img[src]', host: { '[src]': 'checkPath(src)', '(error)': 'onError()' } }) export class DefaultImage { @Input() src: string; public defaultImg: string = '{YOUR_DEFAULT_IMG}'; public onError() { this.src = this.defaultImg; } public checkPath(src) { return src ? src : this.defaultImg; } }Margen
<img [src]="{DESIRED_IMAGE_SOURCE}" />