如何为img setAttribute设置回退图像

How to set a fallback image for img setAttribute

本文关键字:设置 回退 图像 setAttribute img      更新时间:2023-09-26

我有一个img元素:

var photo = document.createElement("img"); 

是由名字存储在对象数组中的照片提供的,所以我像这样"提供"照片:

photo.setAttribute('src', './pics/' + myarray[id].Name + '.jpg');

效果很好。

唯一不起作用的是为没有图片的元素设置带有默认照片的属性。

我试着在上面做一个setAttribute行,为所有元素设置一个"默认"图片,希望第二行会用适当的图片替换有一个元素,并保持默认的元素不变,但没有…console.log仍然显示期待name+jpg方案的消息,它完全忽略了我之前的行(所以我很确定它不是如何工作的)。

因此,如果您有一个img元素,在数组中有许多实例,那么将默认图片分配给没有指定图片的元素的最佳方法是什么?

谢谢!

会使用jQuery吗?这是您所描述的问题的解决方案。如果图像返回404,则应用默认图像

http://jsfiddle.net/gunderson/D3DSt/

var photo = document.createElement("img");
photo.setAttribute("id", "myPhoto");
$('body').append(photo);
$("#myPhoto").attr("src", 'alogo3w.png').error(function() {
    $(this).attr("src", "https://www.google.com/images/srpr/logo3w.png");
  })
​

必要时只设置默认值

photo.setAttribute('src', './pics/' + ( myarray[id].Name ? myarray[id].Name : 'default' ) + '.jpg');