Winkel 2 - Überprüfen Sie, ob die Bild-URL gültig oder fehlerhaft ist

76

Ich rufe eine große Anzahl von Bild-URLs von einer API ab und zeige sie in einer Angular 2-Webanwendung an. Einige der URLs sind fehlerhaft und ich möchte sie durch ein Standardbild ersetzen, das lokal auf meinem Webserver gespeichert ist. Hat jemand einen Vorschlag, wie man die URLs testet und im Fall des Statuscodes 404 das kaputte Bild ersetzt?

Vielen Dank!

Jakob Svenningsson
quelle

Antworten:

156

Hören Sie sich das errorEreignis des Bildelements an:

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

wo updateUrl(event) { ... }weist einen neuen Wert zu this.someUrl.

Plunker Beispiel

Wenn Sie nur Code einchecken möchten, können Sie die unter Überprüfen, ob das Bild vorhanden ist, mithilfe von Javascript erläuterte Methode verwenden

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

  updateUrl() {
    this.src = this.default;
  }
}

Direktive Plunker Beispiel

Günter Zöchbauer
quelle
2
Warum wird dies abgelehnt? AFAIK dies ist die richtige Methode, die Ereignisse des Browsers zu nutzen ...
Cory Silva
@ GünterZöchbauer Wäre es gut, eine Richtlinie zu haben, um so etwas zu handhaben? irgendwelche Gedanken? +1
Pankaj Parkar
Du hast recht. Ich habe irgendwie das "Standardbild" verpasst und einige Berechnungen angenommen, um eine alternative URL zu erhalten.
Günter Zöchbauer
Wäre es nicht besser, stattdessen das Standardbild in der Direktive als Klasseneigenschaft anzugeben? Wenn ich ein [default]='...'Bild verpasse, würde ich es überspringen und Sie vermeiden, defaultjedes <img> -Tag hinzuzufügen .
Eric Martinez
2
Vielen Dank, es hat gerade ein IIS-Problem mit dem relativen Pfad mit Bildern für mich gelöst. U da Chef!
Jaime Yule
51

Sie können onErrorevent auf diese Weise verwenden, um invalid urloder zu behandeln broken url.

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

Auf diese Weise können Sie src mit dem Ereignis onError direkt den Pfad img zuweisen

Mikronyken
quelle
2
Überprüfen Sie mindestens den Plunker. Ich denke nicht daran, richtig oder nicht richtig zu sein. Es geht darum, andere Möglichkeiten zu haben ... was sagst du?
Mikronyken
2
Nein, ich verstehe es nicht falsch, keine Sorge. Nur zu sagen, dass es auch einige andere Optionen geben kann. Dies ist einer von ihnen. Auf diese Weise können Sie den Pfad direkt zuweisen.
Mikronyken
1
Danke @PankajParkar
micronyks
1
Funktioniert gut auf Angular 6
Celso Soares
1
Funktioniert für mich auf Angular 8 & 9. Danke @micronyks. 👍
AllJs
23

Mein Beispiel zu Winkel 4

<img [src]="img" (error)="img.src = errorImg" #img>
  1. Wo img - Weg zum Bild;
  2. Fehler - Fehler senden
  3. errorImg - Pfad zum Standardbild
  4. #img - Link zum img-Objekt
Sergamere
quelle
Es ist der sauberste Weg, es zu tun, funktioniert ohne Probleme
Romy Gomes
Wie können Sie den # img-Link (sowie die img-Referenz im Fehlerhandler) dynamisch gestalten, wenn Sie das Bild-Tag in einem ngFor haben?
HisDivineShadow
Ich habe diese Antwort positiv bewertet, da sie zunächst zu funktionieren schien. Dann habe ich festgestellt, dass der Browser für immer geladen wird (Laden des Spinners auf der Registerkarte von Chrome), obwohl alle Assets und Bilder korrekt geladen wurden. Es funktioniert, aber dann gibt es dieses nervige Problem mit dem unendlichen Laden. Ich kann meine Gegenstimme erst rückgängig machen, wenn die Frage bearbeitet wurde.
Jeremy Thille
7

Ich habe eine sehr einfache Lösung gefunden, die für mich funktioniert hat. Dies prüft nicht auf 404, aber ich hatte Objekte, die möglicherweise ein .image-Attribut hatten. Ich weiß, dass dies nicht die Antwort auf seine Frage ist, aber hoffentlich hilft es jemandem da draußen.

<img class="list-thumb-img" [attr.src]="item.image?.url ? item.image.url : 'assets/img/140-100.png'">
doneDone
quelle
Ja. Es ist die einfachste Lösung. Danke
Abhiz
7

Ich benutze einen Base64-Ladespinner:

<img [src]="photoContainer.photo.url | secure" onError="this.src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'">
Robert King
quelle
4

Eine perfekte Angular 8-Direktive:

import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';

@Directive({
    selector: '[appImage]'
})
export class ImageDirective implements AfterViewInit {

    @Input() src;

    constructor(private imageRef: ElementRef) {
    }

    ngAfterViewInit(): void {
        const img = new Image();
        img.onload = () => {
            this.setImage(this.src);
        };

        img.onerror = () => {
            // Set a placeholder image 
            this.setImage('assets/placeholder.png');
        };

        img.src = this.src;
    }

    private setImage(src: string) {
        this.imageRef.nativeElement.setAttribute('src', src);
    }
}

Jetzt wird HTML sein:

<img [src]="'/some/valid-image.png'" appImage>
Shashank Agrawal
quelle
Es wendet keine Richtlinie an. Ich habe eine Richtlinie erstellt und nicht funktioniert !!
Pathik Vejani
3

Wenn Sie ein Bild ändern möchten, das nicht geladen wird oder dessen Quelle beschädigt ist ... Winkel 8, müssen Sie nur die Quellcode-Adresse dieses Ziels für ein Standard-Asset ändern:

  • Komponenten-HTML

    <... [src] = "person.pictureUrl" (Fehler) = "pictNotLoading ($ event)">

  • Komponente TS

    pictNotLoading (event) {event.target.src = 'assets / nopicture.png'; }}

Ing Guillermo Malagón
quelle
2

Dies ist meine Lösung für den Fallback auf mehrere Bilder. Grundsätzlich trennen wir den ChangeDetector, sobald wir das Image aufgelöst haben, damit wir die CPU in VM-Prüfzyklen reduzieren können, sobald das Image aufgelöst ist.

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';
    }





}
born2net
quelle
0

Sie können für diesen Anwendungsfall einfach einen ternären Operator verwenden. Ich gehe davon aus, dass Sie die Antworten von einem Remote-Server erhalten

<img src="{{ res.image ? res.image : onErrorFunction() }}"

Wenn Sie nicht möchten, dass das Image vom Server verwendet wird, schreiben Sie den Pfad in einfache Anführungszeichen.

Wenn der Link unterbrochen ist, wird er an onErrorFunction weitergeleitet. Wenn er nicht unterbrochen ist, wird das res.image geladen.

Chirag Jain
quelle