使用备用源附加图像，以防第一个图像不可用

Question

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

我需要在img_A.jpg的{​​{1}}内附加div，但是，如果该图片无法访问或无法使用，我希望body成为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"
     })
);