我正在使用AWS Lambda来调整图片大小。
大多数时候,当我尝试使用调整大小的图像时,调整大小过程就完成了。但是,有时AWS Lambda尚未完成其调整大小过程,这意味着图像无法使用。
所以当我使用
时<img [src]="imgUrl">
它会显示:
我的控制台会显示:
GET https://foo.com/bar.jpg 403(禁止)
有没有办法捕获此错误,然后再次渲染UI /加载图像的那部分?感谢
答案 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";
}
答案 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错误代码。