この403（禁止された）エラーをキャッチしてUIを再度レンダリングするにはどうすればよいですか？

Question

AWSラムダを使用して画像のサイズを変更しています。

ほとんどの場合、サイズ変更されたイメージを使用しようとすると、サイズ変更プロセスが実行されます。ただし、AWS Lambdaがサイズ変更プロセスを完了していないことがあります。これは、イメージが使用できる状態になっていないことを意味します。

をそして、私のコンソールが表示されます：：

だから私は

<img [src]="imgUrl"> 

を使用する場合には、表示されます

がGET https://foo.com/bar.jpg 403（禁止）

このエラーをキャッチして、UI /画像の一部を再度レンダリングする方法はありますか？おかげ

Answer 1

SRCリンクが壊れたときに、いくつかの他の画像を表示することができ、

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

更新：

何とか（あなたのコメントによると）onErrorが変数で動作していないことがわかりました。私は

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

私はこの作業を取得するために見る唯一の方法は、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

ただし、無効なURLを渡すことはありません。

サーバーは、無効なURLを要求した場合にサーバーからHTTPエラーコードを返さずに、AJAX呼び出しを使用して既存のURLを確認できるAPIをサポートする必要があります。