如何从XML文件提取JPG图片并在HTML中自动逐行展示

你找到的代码思路没问题，但存在几个影响运行的小问题，比如URL格式错误、DOM加载时机不对，也没处理逐行展示的样式。下面是修正后的完整可运行代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 让图片逐行展示，每个单独占一行 */
        #image-container img {
            display: block;
            margin: 8px 0;
            /* 可选：限制图片最大宽度，避免超出页面 */
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="image-container"></div>

    <script>
        // 在线XML文件的完整URL
        const xmlUrl = 'https://www.anlux.pl/xml?id=34&hash=70e8721513db4762df3c83c1f758731d2a1ebb95286b0482b4d7a5c0dcfc52c6';
        
        fetch(xmlUrl)
            .then(response => {
                // 先验证请求是否成功
                if (!response.ok) {
                    throw new Error(`请求出错：${response.status}`);
                }
                return response.text();
            })
            .then(xmlText => {
                // 解析XML文本为DOM对象
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlText, "text/xml");

                // 提取所有<image>标签中的JPG链接
                const imageElements = xmlDoc.getElementsByTagName("image");
                const imageUrls = Array.from(imageElements)
                    .map(element => element.textContent.trim()) // 去除链接前后的空格
                    .filter(url => url.endsWith(".jpg"));

                // 批量创建图片元素并插入容器
                const imageContainer = document.getElementById("image-container");
                imageUrls.forEach(imageUrl => {
                    const imgElement = document.createElement("img");
                    imgElement.src = imageUrl;
                    imgElement.alt = "商品图片"; // 添加alt属性，提升页面可访问性
                    imageContainer.appendChild(imgElement);
                });
            })
            .catch(error => {
                // 捕获并显示错误信息
                const container = document.getElementById("image-container");
                container.innerHTML = `<p>图片加载失败：${error.message}</p>`;
            });
    </script>
</body>
</html>

关键修正与说明： #

• URL修复：原代码的fetch地址缺少引号和https://前缀，浏览器无法识别正确的网络地址；
• DOM加载时机：把脚本放在body标签末尾，确保页面DOM元素加载完成后再获取容器，避免找不到元素的问题；
• 逐行展示实现：通过CSS设置图片为display: block，让每个图片单独占据一行，同时添加margin优化间距；
• 错误处理：新增请求失败和解析异常的捕获逻辑，方便排查网络或XML格式问题；
• 细节优化：去除URL前后空格、添加图片alt属性，提升代码健壮性和页面可访问性。

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