Trying to display images using <img> tag in XSLT

Question

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.

Are you actually getting an error message when you run the XSLT? Hopefully, you should be! If so, can you show the error message. If not, first try re-running your XML and XSLT at xsltransform.net and that will give you some helpful information! If you can't work out how to solve it, could you edit your question to show the output you expect, so that way any answer can not only tell you not only what is wrong, but exactly how to correct the XSLT to achieve what you need. Thank you! — Tim C, Commented Apr 9, 2015 at 10:46
On Chrome it doesn't show any error message but in FireFox it tells me: Error loading stylesheet: Parsing an XSLT stylesheet failed. I'm editing the question to show the output needed. — Manisha Singh Sanoo, Commented Apr 9, 2015 at 10:53

Tim C · Accepted Answer · 2015-04-09 11:05:46Z

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

The template is nested within another template match, which is not allowed. Templates can only be children of the top-level xsl:stylesheet element
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>

Thanks that works. I'm new to XSLT i'll make sure to never make these mistakes again. But the pictures are not being displayed and the link is correct. What could be the problem? — Manisha Singh Sanoo, Commented Apr 9, 2015 at 11:12
At the moment, the images would need to be in the same folder as the XML file. If this is not the case, you might need to specify a relative file-path. — Tim C, Commented Apr 9, 2015 at 11:14
They are in the same folder. Could it be because it is a web service? I've had difficulties displaying pictures from xampp. — Manisha Singh Sanoo, Commented Apr 9, 2015 at 11:16
I found my mistake and it was one which is unexpected. Never knew i had to save links as .jpg instead of .jpeg in the database. When i changed it to .jpg it worked. — Manisha Singh Sanoo, Commented Apr 9, 2015 at 11:40

Collectives™ on Stack Overflow

Trying to display images using <img> tag in XSLT

1 Answer 1

Not the answer you're looking for? Browse other questions tagged
xml
xslt
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Not the answer you're looking for? Browse other questions tagged xmlxslt or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
xml
xslt
or ask your own question.