innerHTML 创建从 XML 到 Gallery 的图像标签

Posted 2023-02-16

【中文标题】innerHTML 创建从 XML 到 Gallery 的图像标签

【英文标题】：innerHTML create image Tag from XML to Gallery

【发布时间】：2022-01-03 16:07:25

【问题描述】：

我正在尝试将图像标签加载到我的 html 中。问题是生成的标签显示为文本并且未加载图像。我该如何解决这个问题？最后，它应该看起来像示例。

这是 XML DATA info2.xml

              <BILD ID="8">
              <ID>8</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_008.jpg"   BORDER=0></PIC>
             </BILD><BILD ID="6">
              <ID>6</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_006.jpg"   BORDER=0></PIC>
             </BILD><BILD ID="1">
              <ID>1</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_001.jpg"   BORDER=0></PIC>
             </BILD><BILD ID="4">
              <ID>4</ID>
              <PIC>&lt;IMG SRC="https://d1pgrp37iul3tg.cloudfront.net/zimmer_pics/zim_238461_004.jpg"   BORDER=0></PIC>
             </BILD>

<script>
        let xmlContent = '';
        let tableGallery = document.getElementById('image-gallery');
        fetch('info2.xml').then((response)=> 
            response.text().then((xml)=>
                xmlContent = xml;

                let parser = new DOMParser();
                let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
                let gallery = xmlDOM.querySelectorAll('BILD');

                gallery.forEach(galleryXmlNode => 

                    let row = document.createElement('li');

                    //Picture
                    let img = document.createElement('');
                    img.innerHTML = galleryXmlNode.children[1].innerHTML;
                    row.appendChild(img);

                    tableGallery.children[1].appendChild(row);
                    
                );
            );
        );    
    </script>

<!--gallery-->
        <div class="clearfix" style="max-width:540px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="images/knurrhahn/thumbs/zim_s_238842_007.jpg"> 
                        <img src="images/knurrhahn/site/obj_full_91963_003.jpg" />
                         </li>
                    <li data-thumb="images/knurrhahn/thumbs/zim_s_238842_015.jpg"> 
                        <img src="images/knurrhahn/site/zim_full_238842_015.jpg" />
                         </li>
                     </ul>
            </div>
        <!--gallery end-->

【问题讨论】：

如果可能，我建议更改 xml 文件的结构。将整个标记存储在那里是愚蠢的。相反，只需添加一个包含实际src 的元素src 并在gallery.forEach() 中创建img。

您的 XML 似乎无效，因为您替换了 lt 而不是 gt。

我无法更改 xml 文件的结构。该文件来自其他目的地。

【参考方案1】：

正如 cmets 中所述，您的 xml 确实格式不正确。如果您确实无法获取生成格式良好的 xml 的源代码，您可以尝试将其视为 html 并取消转义 html 实体。然而，从长远来看，这不是最好的方法。

至少在您的示例 xml 的情况下，以下内容将起作用：

let parser = new DOMParser();
let xmlDOM = parser.parseFromString(xmlContent, "text/html");

let gallery = xmlDOM.evaluate(
  "//BILD//PIC",
  xmlDOM,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);
for (let i = 0; i < gallery.snapshotLength; i++) 
  let galleryXmlNode = gallery.snapshotItem(i);
  row = document.createElement("li");
  row.innerHTML = galleryXmlNode.textContent
  tableGallery.appendChild(row);