如何使用JavaScript读取XML存储的图片链接并在HTML中展示

该需求完全可实现，不需要引入额外第三方库，用浏览器原生API就能完成，核心流程是解析XML结构、提取存储的图片地址、动态生成图片元素插入页面。

具体实现步骤 #

• 解析XML：使用浏览器原生DOMParser对象，可以把XML格式的字符串转换成可遍历操作的文档对象，如果你是通过fetch/axios请求拿到的XML数据，也可以直接用这个方法解析。
• 提取地址：和操作普通HTML DOM逻辑一致，用选择器定位到存储图片地址的<flag>节点，读取节点内的文本内容就是图片的访问地址。
• 渲染图片：创建<img>元素，把提取到的地址赋值给元素的src属性，按需添加alt说明、尺寸样式后，插入到页面对应的展示位置即可。

可直接运行的代码示例 #

首先在HTML中预留图片展示的容器：

<div id="flagWrap"></div>

对应JavaScript逻辑：

// 示例XML数据，实际使用时可替换为接口返回的XML内容
const xmlData = `<countries>
<country region="north-america">
    <name>USA</name>
    <totalcases>88,822,018</totalcases>
    <activecases>3,247,166</activecases>
    <seriouscases>3,117</seriouscases>
    <totalrecoverd>84,534,008</totalrecoverd>
    <deaths>1,040,844</deaths>
    <casespermill>265,263</casespermill>
    <flag>https://cdn.britannica.com/33/4833-004-828A9A84/Flag-United-States-of-America.jpg</flag>
</country>
</countries>`;

// 初始化解析器解析XML
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlData, "text/xml");

// 提取图片地址和国家名称
const countryName = xmlDoc.querySelector("name").textContent;
const imgUrl = xmlDoc.querySelector("flag").textContent;

// 创建图片元素
const flagImg = document.createElement("img");
flagImg.alt = `${countryName}国旗`;
flagImg.src = imgUrl;
// 可按需自定义图片样式
flagImg.style.width = "180px";
flagImg.style.border = "1px solid #eee";

// 插入到页面容器中
document.querySelector("#flagWrap").appendChild(flagImg);

注意事项：如果XML数据来自跨域接口，需要目标服务配置正确的CORS跨域规则，否则浏览器会拦截请求导致无法拿到XML内容；如果图片地址本身是跨域资源且没有配置跨域允许，图片可能无法正常加载，这属于资源服务端的配置问题，和前端解析逻辑无关。

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