Html 如何捕捉这个403（禁止）错误，并再次呈现UI？

我正在使用AWS Lambda来调整图像的大小

大多数时候，当我尝试使用调整大小的图像时，调整大小的过程已经完成。但是，有时AWS Lambda尚未完成其大小调整过程，这意味着图像尚未准备好使用

所以当我使用

<img [src]="imgUrl">

它将显示：

我的控制台将显示：

获取403（禁止）

---

是否有方法捕获此错误，然后再次呈现UI/加载图像的该部分？谢谢

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

---

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

---

当src链接断开时，您可以显示一些其他图像

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

---

演示：

当src链接断开时，您可以显示一些其他图像

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

---

演示：

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

---

服务器需要支持一个API，在该API中，您可以使用AJAX调用检查现有URL，而无需从服务器返回HTTP错误代码，以防您请求无效URL。

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

---

服务器需要支持一个API，您可以使用AJAX调用检查现有URL，而无需从服务器返回HTTP错误代码，以防请求无效URL。

这看起来很酷！实际上，我正在使用图像数组

imgUrls[]

和

*ngFor

，所以我需要选择第二种方法，我成功地使用了一个静态链接，就像您的演示一样，但是有没有一种方法可以使用变量来提供链接？我试过

onError=“this.src=newUrl”

，

onError=“this.src=this.newUrl”

，

onError=“this.src={{newUrl}}”

，但这两种方法都不管用这看起来很酷！实际上，我正在使用图像数组

imgUrls[]

和

*ngFor

，所以我需要选择第二种方法，我成功地使用了一个静态链接，就像您的演示一样，但是有没有一种方法可以使用变量来提供链接？我尝试了

onError=“this.src=newUrl”

，

onError=“this.src=this.newUrl”

，

onError=“this.src={{newUrl}}”

，但都不起作用