straysheep17 straysheep17 - 10 months ago 54
HTML Question

How to display an image in HTML using XSLT?

I've been trying to use XSLT to output data that my XML has. One of the requirements that is set is to have an image file in the XML file:

<room id="001">
<capacity>2 Adults</capacity>
<room_name>King Double</room_name>
<loc>Ground Floor</loc>

While I can grab the string in between the tags, I can't seem to display the image file. Am I writing something wrong here, or is it an error in the XSLT?

This is a portion of my XSLT:

<tr border="2" bgcolor="#ffebcd">
<td> <xsl:value-of select="room_name"/> </td>
<td> <xsl:value-of select="capacity"/> </td>
<td> <xsl:value-of select="info"/> </td>
<td> <xsl:value-of select="loc"/> </td>
<td> <xsl:value-of select="feat"/> </td>
<td> <xsl:value-of select="cost_st"/> </td>
<td> <xsl:value-of select="cost_lt"/> </td>


What I'm trying to do is display the image file without specifying the particular image because the XSLT file will be used as a template for two separate XML pages.

Answer Source

Assuming that your XSLT fragment is operating correctly, you can add another td that includes a reference to the image like this:

<td><img src="{photo}"/></td>

Here, {photo} is an attribute value template.

Not working?

If the file is in a directory other than that of the HTML page, you'll need to construct a relative path, e.g,

<td><img src="images/{photo}"/></td>

or an absolute path, e.g,

<td><img src="{photo}"/></td>

Still not working?

To debug the image path, first write the HTML by hand and ensure that your mental model of how to write an absolute or relative @src path is correct. Then, examine the HTML source being generated by the XSLT to check that the path matches your proven, hand-crafted path.