CODEWITHSUNDEEP
xmlxslt
Manisha Singh Sanoo
Manisha Singh Sanoo

Reputation: 929

Trying to display images using <img> tag in XSLT

I'm trying to display images from the xml but i think there's an error in my XSLT. Can you tell me what's wrong or point me to the right direction? Thanks.

Here's my xml from the REST response which was converted to XML:

<Result>
<DressPrice>
  <Name>Dress 2</Name>
  <Price>20</Price>
  <Image>2.jpeg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 9</Name>
  <Price>20</Price>
  <Image>3.jpeg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 10</Name>
  <Price>20</Price>
  <Image>0905C58A0179_1.jpeg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 11</Name>
  <Price>20</Price>
  <Image>0905C58A0179_1.jpeg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 12</Name>
  <Price>20</Price>
  <Image>0905C58A0179_1.jpeg</Image>
</DressPrice>
</Result>

And this is my XSLT:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*" /> 
<xsl:template match="/">
    <html>
        <head><title>Dresses Per Price</title>
        <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Dresses Per Price Displayed</h3>
            <table border="1">
                <thead>
                    <tr style="background-color:PaleGreen;"><th>Name</th><th>Price</th><th>Image</th></tr>
                </thead>
                <tbody>
                    <xsl:for-each select="Result">
                        <xsl:apply-templates>
                            <xsl:sort select="Name" data-type="text" order="ascending"/>
                        </xsl:apply-templates>
                    </xsl:for-each>
                </tbody>
            </table>
            <p><strong>Note:</strong>Data listed above may not reflect the current state</p>
        </body>
    </html>
</xsl:template>
<xsl:template match="DressPrice">
    <xsl:variable name="cssClass">
        <xsl:choose>
            <xsl:when test="position() mod 2 = 0">coloured</xsl:when>
            <xsl:otherwise>normal</xsl:otherwise>
        </xsl:choose>
    </xsl:variable>
        <xsl:template match="Image"> <!--To display image-->
    <xsl:variable name="img">
    <td><img src="{$img}"></img></td>
    </xsl:variable>
        </xsl:template>
    <tr class="{$cssClass}">
        <xsl:apply-templates select="Name"/>
        <xsl:apply-templates select="Price"/>
        <xsl:apply-templates select="Image"/>
    </tr>
</xsl:template>

<xsl:template match="Name|Price|Image">
    <td><xsl:value-of select="text()"/></td>
</xsl:template>
</xsl:stylesheet>

This is the current output without adding the Image template.

enter image description here

What i want to do is to display the images in the Image column instead of the link.

Upvotes: 1

Views: 8049

Answers (1)

Tim C
Tim C

Reputation: 70648

The problem lies in these lines....

<xsl:template match="Image"> <!--To display image-->
    <xsl:variable name="img">
       <td><img src="{$img}"></img></td>
    </xsl:variable>
</xsl:template>

The two things wrong here are

  1. The template is nested within another template match, which is not allowed. Templates can only be children of the top-level xsl:stylesheet element
  2. You are trying to reference the img variable inside the declaration of the same variable.

What you need to do is move the image template to be a child of xsl:stylesheet and simplify it as follows

<xsl:template match="Image"> <!--To display image-->
    <td><img src="{.}"></img></td>
</xsl:template>

You would also need to amend the template that matches Name|Price|Image to just match Name|Price instead.

Try this XSLT

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*" /> 
<xsl:template match="/">
    <html>
        <head><title>Dresses Per Price</title>
        <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Dresses Per Price Displayed</h3>
            <table border="1">
                <thead>
                    <tr style="background-color:PaleGreen;"><th>Name</th><th>Price</th><th>Image</th></tr>
                </thead>
                <tbody>
                    <xsl:for-each select="Result">
                        <xsl:apply-templates>
                            <xsl:sort select="Name" data-type="text" order="ascending"/>
                        </xsl:apply-templates>
                    </xsl:for-each>
                </tbody>
            </table>
            <p><strong>Note:</strong>Data listed above may not reflect the current state</p>
        </body>
    </html>
</xsl:template>

<xsl:template match="DressPrice">
    <xsl:variable name="cssClass">
        <xsl:choose>
            <xsl:when test="position() mod 2 = 0">coloured</xsl:when>
            <xsl:otherwise>normal</xsl:otherwise>
        </xsl:choose>
    </xsl:variable>
    <tr class="{$cssClass}">
        <xsl:apply-templates select="Name"/>
        <xsl:apply-templates select="Price"/>
        <xsl:apply-templates select="Image"/>
    </tr>
</xsl:template>

    <xsl:template match="Image"> <!--To display image-->
        <td><img src="{.}"></img></td>
    </xsl:template>


<xsl:template match="Name|Price">
    <td><xsl:value-of select="text()"/></td>
</xsl:template>
</xsl:stylesheet>

Upvotes: 4

Related Questions