是否可以为 html 图片提供多个后备网址？答案

【问题标题】：Is it possible to give html images more than one fallback url?是否可以为 html 图片提供多个后备网址？
【发布时间】：2021-04-23 19:58:37
【问题描述】：

我发现如果第一次加载失败，您可以使用onerror 为<img> 提供一个备用网址。

但是可以提供一个源（url）列表来尝试并继续尝试直到其中一个加载？

我花了大约一个小时来解决这个问题，并正在努力使用 JavaScript 来解决这个问题。我认为它非常笨重，我想知道是否有更漂亮的方法来做到这一点。

我的丑陋做法

每个图像都有多个数据属性，例如fallback1、fallback2，如果加载失败，则可以从其他来源加载。每张图片还有this.onerror=null;this.src='error.jpg 所以每张加载失败的图片都会改为显示图片error.jpg。

所以图像可能看起来像这样

<img src="https://i.imgur.com/iYNdJeW.jpg" onerror="this.onerror=null;this.src='error.jpg'" data-fallback1="https://i.imgur.com/iYNdJeW2.jpg" data-fallback2="https://i.imgur.com/iYNdJeW3.jpg" />

在window.onload 中调用一个脚本，迭代每个图像并检查源是否以error.jpg 结尾。

如果是这样，它将获取该图像的数据属性 (fallback1) 中的第一个后备 URL，并将源更改为该 URL。然后从图像中删除该数据属性（不确定这是否可能或打算这样做），因为他已经尝试过了。然后脚本再次递归运行。

如果没有图像的源以error.jpg 结尾，或者如果源以error.jpg 结尾的所有图像都没有任何数据属性（没有其他可供尝试的替代源），则递归停止。

我认为它会起作用，但它看起来非常非常hackish。

我发现了<picture> 和<source> 并且非常乐观，但是<picture> 如果图像未加载，则只接受404。

有没有人想出更好的方法来做到这一点？理想情况下，我希望你能给img 一个网址列表，它会一直尝试直到它没有错误。

【问题讨论】：

我个人认为这在移动领域并不是一个好的做法。尝试加载连接不良的图像并多次犯同样的错误是不合逻辑的。

标签： javascript html

【解决方案1】：

当您的第一个错误被触发时，您将 onerror 设置为 null。如果您更改源并且无法再次加载，Onerror 将自动触发。您可以只存储后备列表并在每次触发 onerror 时增加一个索引。

这是一个示例，您可以轻松地将其转换为将所有不同的变量直接存储在元素上。我提供了 4 个虚假 URL 和最终占位符图像作为真实 URL。您会看到它确实加载了占位符图像。

var fallbacks = ["https://example.com/badurl1.jpg", "https://example.com/badurl2.jpg", "https://example.com/badurl3.jpg", "https://via.placeholder.com/350x150"];
var index = 0;

document.querySelector("img").onerror = function(){
  if(index >= fallbacks.length) return;
  let next = fallbacks[index];
  this.src = next;
  index++;
};

&lt;img src="https://example.com/badurl.jpg"/&gt;

【讨论】：

【解决方案2】：

这将在列表中循环，直到您的图像停止出现错误要对其进行编辑，请更改“fallbacksrc”数组
HTML

<img src="*" id="img" onerror="ImgOnError()"></img>

let fallbacksrc=[]; //All All Fallbacks Here, when error will start at the second one because 1st one is already tried
let fallbackcount = 1;
let Img = document.getElementById('img')
function ImgOnError(){
    if(fallbackcount >= fallbacksrc.length){
        fallbackcount = 0
        Img.src=fallbacksrc[fallbackcount]
    }else{
        Img.src=fallbacksrc[fallbackcount]
    }
    fallbackcount++;
}

【讨论】：

你刚刚创建了一个永无止境的错误请求。

【解决方案3】：

我想出了一种 vanilla-JavaScript 方式，您无需在 javascript 中指定图像。

定义这个函数：

function incrementFallbackSrc(img, srcs) {
    if (typeof img.fallbackSrcIndex === 'undefined') img.fallbackSrcIndex = 0;
    img.src = srcs[img.fallbackSrcIndex++];
}

对于每张图片，在函数调用中传递所有后备 URL。

<img
src="https://i.imgur.com/iYNdJeW.jpg"
onerror="javascript:  incrementFallbackSrc(this, ['https://i.imgur.com/iYNdJeW2.jpg',
'https://i.imgur.com/iYNdJeW3.jpg',
'error.jpg'])">
>

要以编程方式设置它，您可能必须将函数放在定义中，如下所示：

img.setAttribute('onerror', "function incrementFallbackSrc(img, srcs) {if (typeof img.fallbackSrcIndex === 'undefined') img.fallbackSrcIndex = 0;img.src = srcs[img.fallbackSrcIndex++];}; incrementFallbackSrc(this, ['" + fallbackUrl1 + "," + fallbackUrl2 + "'])");

【讨论】：