javascript - 如何从属性创建文件路径

Question

我有一个 xml 文件，我正尝试使用 css 对其进行转换。

Part of the xml file:

<figure id="fig-0001">
<title>This is a figure</title>
<graphic infoEntityIdent="IMG-001-01"/></figure>

“infoEntityIdent”属性的值是与 xml 文件位于同一目录中的图像文件的名称(不带文件类型扩展名)。如果我没有像下面这样指定文件扩展名:

 graphic
    {
        content: url(IMG-001-01);
    }

图片不显示。

It works when I type it like this:

 graphic
    {
        content: url(IMG-001-01.png);
    }

如何让图片显示出来？我可以让它用 javascript 显示吗？

我的限制是:

• 我无法操作 xml 文件本身(无法手动将文件扩展名添加到属性值的末尾)
• 图像文件类型不同(*.jpeg、*png 等的混合类型)

提前谢谢你。

Answer 1

在内存中创建一个 img 元素，并连续加载两个 url 变体(png 和 jpg)，无论哪个加载成功，都可以使用。为此，您可以使用类似于以下 jquery 代码的代码。

$(graphic).forEach((gr)=>{
         $("<img/>")
        .on('load', function() { console.log("image loaded correctly"); })
        .on('error', function() { 
                $(this).attr("src", $(gr).attr("infoEntityIdent")+".png");
        })
        .attr("src", $(gr).attr("infoEntityIdent")+".jpg")
    ;
    });

或者使用 css，你可以在前后使用 2 个 psedo 元素，无论哪个负载都会出现。

graphic:after
    {
        content: url(IMG-001-01) ".png";
    }
graphic:before
    {
        content: url(IMG-001-01) ".jpg";
    }