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

Question

我有两个图像img_A.jpg和img_B.jpg.

我需要追加img_A.jpg内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"
     })
);

示范

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

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