Javascript Girl
  1. Javascript Girl
  3. Angulaire 2 – Vérifiez si l'URL de l'image est valide ou cassée
Intereting Posts
Comment faire face à la limite des demandes parallèles par domaine du navigateur en cas de demande AJAX prioritaire? Comment télécharger les anciens navigateurs (ex Safari 5.1.4) Comment empêcher le retour sur le bouton Asp tout en affichant une fenêtre contextuelle utilisant JQuery Obtenir des métriques de police en JavaScript? Événement de sélection automatique de jQuery Ajouter un module de noeud à l'application CLM Ember Node.js, la pyramide du doom (même avec async), pouvez-vous l'écrire mieux? Mise à jour de l'état profond de ReactJS Utilisation de Google Maps hors ligne (Js Api) Vous souhaitez supprimer Browser.sleep () Différence dans l'URL décodage / codage UTF-8 entre Java et JS / AS3 (bug !?) JQuery.parseJSON lance l'erreur "JSON invalide" en raison d'une citation unique échappée dans JSON Google maps in hidden div Afficher un message d'erreur unique pour plusieurs champs (jQuery validate plugin) Obtenez la date de demain avec getDay Javascript

Angulaire 2 – Vérifiez si l'URL de l'image est valide ou cassée

Je récupère un grand nombre d'URL d'image à partir d'une API et les affiche dans une application Web angulaire 2. Certaines des URL sont brisées et je veux les remplacer par une image par défaut stockée localement sur mon serveur web. Est-ce que quelqu'un a une suggestion sur la façon de tester les urs et, dans le cas du code d'état 404, remplacer l'image brisée?

Merci!

Écoutez l'événement d' error de l'élément image: 

 <img [src]="someUrl" (error)="updateUrl($event)">

Où updateUrl(event) { ... } attribue une nouvelle valeur à this.someUrl .

Exemple Plunker

Si vous souhaitez entrer le code uniquement, vous pouvez utiliser la méthode expliquée dans Vérification de l'existence de l'image à l'aide de javascript 

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

Exemple de directive Plunker

Vous pouvez utiliser l'événement onError cette manière pour gérer l' invalid url ou l' broken url . 

 <img [src]="invalidPath" onError="this.src='images/angular.png'"/>

De cette façon, vous pouvez affecter directement le chemin img à src avec l'événement OnError

C'est ma solution pour le repli sur les multi images. Nous détachons essentiellement ChangeDetector une fois que nous avons résolu l'image afin que nous puissions réduire la CPU sur les cycles de vérification vm une fois que l'image est résolue. 

 import {Component, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/core'; import {AppStore} from "angular2-redux-util/dist/index"; @Component({ selector: 'logoCompany', changeDetection: ChangeDetectionStrategy.Default, template: ` <div style="padding-top: 7px" > <span style="color: gainsboro; font-family: Roboto">{{getBusinessInfo('companyName')}}</span> <!--<img style="width: 35px" class="img-circle" src="http://galaxy.example.me/Resources/Resellers/{{getBusinessInfo('businessId')}}/{{getBusinessInfo('fileName')}}" />--> <img style="width: 35px" class="img-circle" [src]="getImageUrl()" (load)="onImageLoaded()" (error)="onImageError()" /> </div> ` }) export class LogoCompany { constructor(private cdr:ChangeDetectorRef) { } private imageRetries:number = 0; private unsub; private detach() { this.cdr.detach(); } private getImageUrl() { var url = ''; switch (this.imageRetries){ case 0: { url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.jpg' break; } case 1: { url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.png' break; } default: { url = 'assets/person.png' break; } } return url; } private onImageLoaded() { this.detach(); } private onImageError() { this.imageRetries++; } private getBusinessInfo(field):string { return '12345'; } }

J'ai trouvé une solution très simple qui a fonctionné pour moi. Cela ne vérifie pas les 404 mais j'ai eu des objets qui possèdent éventuellement et .image un attribut. Je sais que ce n'est pas la réponse à sa question, mais j'espère que cela aide quelqu'un là-bas. 

 <img class="list-thumb-img" [attr.src]="item.image?.url ? item.image.url : 'assets/img/140-100.png'">

J'utilise un spinner de chargement base64: 

 <img [src]="photoContainer.photo.url | secure" onError="this.src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ+CiAgICAgICAgPC+CiAgICAgICAgPC+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'">