Javascript 是否为img html标记提供多个备选图像源？

我有两个备选图像和一个默认图像，以防前两个图像找不到

<img 
    src='image1.png'
    onError="this.onerror=null;this.src='image2.png';"
    onError="this.onerror=null;this.src='default.png';" />

<img src="image1.png" data-alt-src="image2.png,default.png" onerror="loadAltImage(this)" />

然后我在三个

上进行了测试，发现

image1.png

和

image2.png

工作正常，但如果没有

image1.png

和

image2.png

，则默认图像

default.png

不会显示

---

关于如何使用上述案例中的多个备选图像的任何提示？

您可以添加一个保存备选图像值的

data alt src

属性，然后让

onerror

属性调用

loadAltImage

函数，该函数只加载下一个备选图像索引。这本质上是递归地调用自己

函数加载图像（元素）{
const alternations=element.dataset.altSrc.split（'，'）；
const nextLoadIndex=parseInt（element.dataset.loadIndex | | 0）；
if（nextLoadIndex

您可能希望改用

addEventListener

，在一系列可能的图像中跟踪您的位置

<img src='image1.png'/>
<script>
function addFallbackSources(img, sources){
  let idx = 0;
  img.addEventListener("error", e=>{
      if(idx >= sources.length) throw new Error("No images left to try");
      img.src = sources[idx++];
  });
}
addFallbackSources(document.querySelector('img'), ["image2.png", "default.png"]);
</script>

函数addFallbackSources（img，源）{
设idx=0；
img.addEventListener（“错误”，e=>{
如果（idx>=sources.length）抛出新错误（“没有要尝试的图像”）；
img.src=源[idx++]；
});
}
addFallbackSources（document.querySelector（'img'），[“image2.png”，“default.png]”）；

像下面这样的方法可能会奏效。

函数setNextAvailableImage（元素，图像列表）{
const current\u img=element.src
让next_img='default.png'
让找到的索引=-1
for（设i=0；i0）{
element.src=图像列表[0]
}
else if（找到索引+1

---

浏览器忽略重复属性您可以为函数实现一个处理程序，然后您可以执行任何需要的逻辑。@charlietfl，我使用

OneError进行了测试=“this.onerror=null；this.src='image2.png'；this.src='default.png'

相同的

onError

属性，但仍然不起作用。试试这个.src='image2.png'||'default.png'@DanielA.White，我没有线索来检查图像是否存在，你能提供代码片段吗？谢谢。请允许我问一下，如何在事件处理程序

onError

的控制台中隐藏错误消息404（未找到）？Thanks@HouyNarun恐怕那是办不到的。另外，我的用户名是“hev1”，而不是“hav1”。您仍然在跟踪索引，只是不在标记上，这使得它不太可扩展。@Bren我认为通过使用闭包来扩展它并不困难。@hev1为什么不将备用源与图像本身相关联？在您的答案中，您只有一个全局变量，该变量假定所有图像都将使用这些图像作为源。

<img src='image1.png'/>
<script>
function addFallbackSources(img, sources){
  let idx = 0;
  img.addEventListener("error", e=>{
      if(idx >= sources.length) throw new Error("No images left to try");
      img.src = sources[idx++];
  });
}
addFallbackSources(document.querySelector('img'), ["image2.png", "default.png"]);
</script>