如何在XSLT/XPath中通过关联ID获取元素的图片路径属性

Alright, let's break down how to solve this problem—you need to pull an image path from a related XML element using ID references, then plug that path into an HTML tag. Here are two common approaches depending on your use case:

Solution 1: XSLT (For XML-to-HTML Transformation) #

If you're doing a static or server-side XML-to-HTML conversion, XSLT is the perfect tool for this. First, let's clarify a complete XML example (since your snippet was partial):

<root>
  <!-- Elements that reference relation IDs -->
  <content>
    <image-ref ref="path_1" />
    <image-ref ref="path_2" />
  </content>
  <!-- Elements holding the actual image paths -->
  <relation id="path_1" path="path/to/image1.jpg" />
  <relation id="path_2" path="path/to/image2.jpg" />
</root>

We'll use an XSLT key to create a quick lookup map between relation IDs and their path attributes, then use that to generate <img> tags:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <!-- Create a lookup key: map relation IDs to their path attributes -->
  <xsl:key name="relation-path-map" match="relation" use="@id" />

  <xsl:template match="/root">
    <html>
      <body>
        <!-- Loop through each element that references a relation ID -->
        <xsl:for-each select="content/image-ref">
          <!-- Fetch the matching path using the ref attribute -->
          <xsl:variable name="resolved-path" select="key('relation-path-map', @ref)/@path" />
          <!-- Output the img tag with the resolved path -->
          <img src="{$resolved-path}" alt="Associated image" />
          <br/>
        </xsl:for-each>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Key Details: #

• The <xsl:key> creates an index of all <relation> elements, using their id attribute as the lookup key.
• key('relation-path-map', @ref) finds the exact <relation> element that matches the ref attribute of your referencing element.
• We pull the path attribute from that matched element and inject it directly into the <img> tag's src attribute.

Solution 2: JavaScript (For Frontend Dynamic Processing) #

If you're working with XML in the browser and need to dynamically generate HTML, use JavaScript to build a lookup map first:

// Sample XML input (you could also load this from a file/API)
const xmlSource = `
<root>
  <content>
    <image-ref ref="path_1" />
    <image-ref ref="path_2" />
  </content>
  <relation id="path_1" path="path/to/image1.jpg" />
  <relation id="path_2" path="path/to/image2.jpg" />
</root>
`;

// Parse the XML
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlSource, "text/xml");

// Build a map of relation IDs to image paths
const pathMap = new Map();
xmlDoc.querySelectorAll("relation").forEach(rel => {
  pathMap.set(rel.getAttribute("id"), rel.getAttribute("path"));
});

// Generate and insert img tags into the DOM
const imageContainer = document.getElementById("image-container");
xmlDoc.querySelectorAll("content/image-ref").forEach(refEl => {
  const refId = refEl.getAttribute("ref");
  const imgPath = pathMap.get(refId);
  
  if (imgPath) {
    const img = document.createElement("img");
    img.src = imgPath;
    img.alt = "Dynamically loaded image";
    imageContainer.appendChild(img);
  }
});

How This Works: #

• We first parse the XML into a DOM object.
• We loop through all <relation> elements and store their id/path pairs in a Map for fast lookups.
• Finally, we iterate over the referencing elements, pull the matching path from the map, and create <img> elements to add to the page.

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