如何捕获此403(Forbidden)错误,并再次呈现UI?

时间:2016-08-01 03:04:24

标签: html amazon-web-services angular aws-lambda

我正在使用AWS Lambda来调整图片大小。

大多数时候,当我尝试使用调整大小的图像时,调整大小过程就完成了。但是,有时AWS Lambda尚未完成其调整大小过程,这意味着图像无法使用。

所以当我使用

<img [src]="imgUrl">

它会显示:

enter image description here

我的控制台会显示:

  

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

有没有办法捕获此错误,然后再次渲染UI /加载图像的那部分?感谢

3 个答案:

答案 0 :(得分:2)

当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

答案 1 :(得分:0)

我认为实现这一目标的唯一方法是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");
}

答案 2 :(得分:0)

此错误由浏览器产生,除了不传递无效的URL之外,您无法阻止它。

服务器需要支持API,您可以使用AJAX调用检查现有URL,而不会在请求无效URL时从服务器返回HTTP错误代码。