Wie wird dieser Fehler 403 (Forbidden) abgefangen und die Benutzeroberfläche erneut gerendert?

Question

Ich verwende AWS Lambda, um das Bild in der Größe anzupassen.

Die meiste Zeit, wenn ich versuche, das skalierte Bild zu verwenden, ist der Größenänderungsprozess abgeschlossen. Manchmal hat AWS Lambda den Größenänderungsprozess noch nicht abgeschlossen, was bedeutet, dass das Image nicht bereit ist.

Also, wenn ich

<img [src]="imgUrl"> 

verwenden wird es zeigen:

Und meine Konsole zeigt:

GET https://foo.com/bar.jpg 403 (Verboten)

Gibt es eine Möglichkeit, diesen Fehler zu erfassen, und dann diesen Teil der UI/Bild erneut zu rendern? Dank

Answer 1

Sie ein anderes Bild zeigen kann, wenn src Verbindung unterbrochen,

<img class="thumbnail-image" [src]="imgUrl" 
onError="this.src='./Imagefolder/placeholder.jpg';" alt="..." /> 

aktualisieren:

Irgendwie fand ich (nach Ihrem Kommentar), dass onError nicht mit Variable arbeitet. Ich sah sich die gleichen Fehler kamen so mit einer kleinen benutzerdefinierten Richtlinie, wie unten gezeigt,

import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core' 

@Directive({ 
    selector: 'img[src]', 
    host: { 
    '(error)':'SetDefaultUrl()', 
    '[src]':'src' 
    } 
}) 
class DefaultImage { 
    @Input() src:string; 
    SetDefaultUrl() { 
    this.src = 'images/angular.png'; // your default img path 
    } 
} 

@Component({ 
    selector: 'my-app', 
    directives:[DefaultImage], 
    template: ` 
    <img [src]="invalidPath"/> 
    ` 
}) 
export class App { 
    invalidPath="abc"; 
} 

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

Answer 2

Der einzige Weg, ich sehe diese Funktion zu erhalten, ist JavaScript:

var img = new Image(); 
img.src = "imgUrl"; 

img.onload = function() { 
    console.log("image was loaded successfully"); 
} 

img.onerror = function() { 
    console.log("there was an error loading the image"); 
} 

Answer 3

Dieser Fehler wird vom Browser erzeugt, und es gibt nichts, was man tun kann, um es zu verhindern , außer dass keine ungültige URL übergeben wird.

Der Server müsste eine API unterstützen, mit der Sie mithilfe von AJAX-Aufrufen nach vorhandenen URLs suchen können, ohne einen HTTP-Fehlercode vom Server zurückzurufen, wenn Sie nach einer ungültigen URL fragen.