javascript - 在第一个图像不可用的情况下附加带有备用图像的图像

Question

我有两张图片 img_A.jpg 和 img_B.jpg。

我需要将 img_A.jpg 附加到 body 的 div 中，但是，以防图像不可访问或无法访问可用，我希望使用 img_B.jpg。

类似于:

$('div').append('<img src="img_A.jpg" />' || '<img src="img_B.jpg" />');

如何实现？

Answer 1

你可以这样做:

$('div').append(
     $('<img>').attr('src',"img_A.jpg").on('error',function(){
          this.src = "img_B.jpg"
     })
);

Demonstration

---

如果您的目标是设置网站的图标，您可以这样做:

$('head').append(
     $('<link rel="icon">').attr('href',"img_A.jpg").on('error',function(){
          this.href = "img_B.jpg"
     })
);