动态添加链接图片：多格式图片加载与多层 fallback 实现咨询

我需要给链接动态添加图片，将链接文本作为图片文件名；若没有匹配的图片，则显示默认图。现有HTML结构如下：

<a href="#">Argentina</a><br>
<a href="#">Brazil</a><br>
<a href="#">Colombia</a><br>
<a href="#">Peru</a><br>
<a href="#">Venezuelaaaaaaaaaa</a>

目前的JS代码仅能尝试加载jpg格式，失败后直接切换到默认图：

$("a").each(function() {
    $("<img>").insertBefore(this).attr("src", "https://www.sciencekids.co.nz/images/pictures/flags680/" + $(this).text() + ".jpg").on("error", function() {
        $(this).attr("src", "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png");
    });
});

但实际图片的扩展名可能是jpg或jpeg，我想实现优先加载x.jpg，加载失败后尝试x.jpeg，若两者均失败则显示default.png，能否通过二次使用onerror事件实现？

同时还有两个疑问：

• 已知文件路径和文件名但扩展名不确定时，有没有更优的图片 fallback 方案？
• img的src属性能否直接包含两个URL，自动显示可加载的那个？因为图片带有透明部分，无法使用多背景图方案。

1. 嵌套onerror实现多层 fallback #

可以通过在第一次error事件中切换到jpeg格式，同时为新的src绑定第二次error事件来加载默认图，代码示例：

$("a").each(function() {
    const countryName = $(this).text();
    const baseUrl = "https://www.sciencekids.co.nz/images/pictures/flags680/";
    const defaultImg = "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png";

    $("<img>")
        .insertBefore(this)
        .attr("src", `${baseUrl}${countryName}.jpg`)
        .on("error", function() {
            // jpg加载失败，尝试jpeg
            $(this).attr("src", `${baseUrl}${countryName}.jpeg`)
                .on("error", function() {
                    // jpeg也失败，加载默认图
                    $(this).attr("src", defaultImg);
                });
        });
});

该逻辑会严格按照jpg→jpeg→默认图的顺序尝试加载，每一层加载失败都会触发下一层的 fallback。

2. 扩展性更强的多扩展名尝试方案 #

如果后续需要支持更多扩展名（如png、webp），可以提前定义扩展名列表，用递归方式依次尝试：

$("a").each(function() {
    const countryName = $(this).text();
    const baseUrl = "https://www.sciencekids.co.nz/images/pictures/flags680/";
    const extensions = [".jpg", ".jpeg"]; // 可按需添加其他扩展名
    const defaultImg = "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png";
    let currentIndex = 0;

    const tryLoad = (imgElement) => {
        if (currentIndex >= extensions.length) {
            // 所有扩展名尝试完毕，加载默认图
            imgElement.attr("src", defaultImg);
            return;
        }
        const src = `${baseUrl}${countryName}${extensions[currentIndex]}`;
        currentIndex++;
        imgElement.attr("src", src).on("error", () => tryLoad(imgElement));
    };

    const img = $("<img>").insertBefore(this);
    tryLoad(img);
});

后续只需修改extensions数组即可扩展支持的格式，无需改动核心逻辑。

3. src属性能否直接设置多个URL？ #

原生img的src属性不支持直接写入多个URL，它仅能识别单个资源地址。如果想实现自动选择可加载的资源，除了JS监听error事件的方案外，还可以使用<picture>标签（适合针对不同格式的兼容性场景）：

<picture>
  <source srcset="x.jpg" type="image/jpeg">
  <source srcset="x.jpeg" type="image/jpeg">
  <img src="default.png" alt="国家旗帜">
</picture>

但<picture>需要提前明确写出所有可能的资源地址，对于动态生成的场景，JS的error事件方案灵活性更高。

内容的提问来源于stack exchange，提问作者tahoma