Angular 2: compruebe si la URL de la imagen es válida o está rota

Después de de una prolongada compilación de información dimos con la solución este atascamiento que suelen tener muchos los lectores. Te dejamos la solución y nuestro objetivo es resultarte de gran apoyo.

Solución:

Escuchar a la error evento del elemento imagen:

donde updateUrl(event) ... asigna un nuevo valor a this.someUrl.

Ejemplo de Plunker

Si desea verificar el código solo, puede usar el método explicado en Verificar si la imagen existe usando javascript

@Directive(
  selector: 'img[default]',
  host: 
    '(error)':'updateUrl()',
    '[src]':'src'
   
)
class DefaultImage 
  @Input() src:string;
  @Input() default:string;

  updateUrl() 
    this.src = this.default;
  

Ejemplo de Directiva Plunker

Puedes usar onError evento de esta manera de manejar invalid url o broken url.

• https://plnkr.co/edit/fD8zxd?p=preview

De esta manera, puede asignar directamente la ruta de img a src con el evento onError

Mi ejemplo en angular 4

1. Donde img – ruta a la imagen;
2. error – emisión de error
3. errorImg – ruta a la imagen predeterminada
4. #img – enlace al objeto img

Comentarios y valoraciones del post

---

---

Utiliza Nuestro Buscador