浏览器不自动解析XML中的自定义标签（如）或src属性，必须用fetch()+response.xml解析后手动提取URL并创建元素插入DOM。
XML 中的 <image></image> 或自定义标签含 src 属性时，浏览器不自动解析渲染
HTML5 本身不会解析 XML 文档里的标签或属性来生成 DOM 元素。哪怕 XML 文件里写的是 <img src="xxx.jpg" alt="html5显示xml图片链接_从xml提取src属性渲染img标签的技巧【技巧】" >，浏览器也只当纯文本显示；更常见的是类似 <item><image>https://a.com/1.jpg</image></item> 这种结构 —— 它没有 src 属性，只是文本内容，必须手动提取后赋给 <img alt="html5显示xml图片链接_从xml提取src属性渲染img标签的技巧【技巧】" > 标签。
用 fetch() + response.xml 解析 XML，再用 querySelector 提取图片 URL
现代浏览器支持直接将 XML 响应转为 Document 对象，比老式 DOMParser 更简洁可靠。关键点在于：XML 命名空间敏感、标签名大小写严格、不能用 getElementById 等简写方法。
- 确保服务器返回的 Content-Type 是
application/xml或text/xml，否则response.xml为null - 若 XML 有命名空间（如
xmlns="http://some/ns"），querySelector必须带命名空间前缀，或改用getElementsByTagNameNS("*", "image") - 推荐优先用
textContent而非innerHTML取值，避免意外 HTML 注入
fetch('data.xml')
.then(r => r.xml())
.then(doc => {
const imageNodes = doc.querySelectorAll('item image');
imageNodes.forEach(node => {
const img = document.createElement('img');
img.src = node.textContent.trim();
img.alt = 'from xml';
document.body.appendChild(img);
});
});
遇到 InvalidStateError: response.xml is null 怎么办
这是最常卡住的地方 —— 表面请求成功，但 response.xml 拿不到解析后的文档。根本原因只有两个：响应不是合法 XML，或 MIME 类型不对。
- 用
response.text()打印原始响应体，确认开头是<?xml且无 BOM/乱码/HTML 错误（比如服务器返回了 404 HTML 页面） - 检查响应头
Content-Type，必须是application/xml、text/xml或带+xml后缀的类型（如application/rss+xml） - 本地文件（
file://协议）下response.xml恒为null，必须走 HTTP 服务（live server或python3 -m http.server）
XML 内容含 CDATA 或实体编码时，textContent 自动解码，无需额外处理
比如 XML 片段：<image></image>，或 <image>https://a.com/a&b.jpg</image>，调用 node.textContent 后得到的都是已解码的 https://a.com/a&b.jpg —— 浏览器 XML 解析器在构建 DOM 时已做标准化处理。
立即学习“前端免费学习笔记（深入）”；
唯一要小心的是路径中含空格或中文：务必用 encodeURI() 包一层再赋给 img.src，否则加载失败静默失败。
const url = encodeURI(node.textContent.trim()); img.src = url;
XML 不是模板语言，也不执行逻辑。所有「渲染」动作都得靠 JS 主动读、构造、插入 —— 这个边界意识比任何技巧都重要。
