如何捕獲此403（禁止）錯誤，並再次呈現UI？

我正在使用AWS Lambda來獲取調整大小的圖像。如何捕獲此403（禁止）錯誤，並再次呈現UI？

大多數時候，當我嘗試使用調整大小的圖像時，調整大小過程完成。但是，有時AWS Lambda尚未完成調整大小的過程，這意味着圖像尚未準備好使用。

所以，當我使用

<img [src]="imgUrl">

，它會顯示：

我的控制檯將顯示：

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

有沒有辦法捕捉到這個錯誤，然後再次渲染那部分UI /加載圖像？由於

來源

2016-08-01 Hongbo Miao

可以顯示一些其他的圖像時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

來源

2016-08-01 05:38:34 micronyks

這看起來很酷！其實我正在使用帶有'* ngFor'的圖像數組'imgUrls []'，所以我需要選擇第二種方式，我成功地使用了類似於演示的靜態鏈接，但是有沒有辦法使用Variable給出鏈接？我嘗試了'onError =「this.src = newUrl」'，'onError =「this.src = this.newUrl」'，'onError =「this.src = {{newUrl}}」'，但都不起作用 –

你能在重生中重現？它應該工作。 – micronyks

我看到得到這個工作的唯一辦法，是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"); 
}

來源

2016-08-01 04:43:55 Chris

此錯誤是由瀏覽器產生的，並沒有什麼可以做，以防止它除非沒有傳遞無效的網址。

服務器需要支持一個API，您可以使用AJAX調用檢查現有的URL，而無需從服務器獲取HTTP錯誤代碼，以防您請求無效的URL。

來源

2016-08-01 05:43:55

如何捕獲此403（禁止）錯誤，並再次呈現UI？

回答

相關問題