How to output an IMG tag from XML using XSLT

Here is my XML:

<?xml version="1.0" encoding="UTF-8"?>
<Collection>
    <Content>
        <ID>2779</ID>
        <Type>Content</Type>
        <Title>Article One</Title>
        <QuickLink>/template.aspx?id=2779</QuickLink>
        <Teaser />
        <Html>
            <root>
                <NewsArticle>
                    <artTitle>The Comprehensive Breast Center: Quality Care on the Fast Track</artTitle>
                    <artThumb>
                        <img alt="Thumb Article One" src="/uploadedImages/Test/News/artOne.png?n=5954" />
                    </artThumb>
                    <artFull />
                    <releaseDate />
                    <contactName />
                    <contactPhone />
                    <contactEmail />
                    <artTeaser>The National Cancer Institute estimates that a woman in the United States has a 1 in 8 chance of developing invasive breast cancer</artTeaser>
                    <artText>
                        <p>The Comprehensive Breast Center: Quality Care on 
the Fast Track</p>
                        <p>

How do I display the IMG tag from my XML above to an HTML document using XSLT

Solution

Something like this should do the trick:

<xsl:template match="/">
  <xsl:for-each select="Collection/Content">
    <xsl:copy-of select="Html/root/NewsArticle/artThumb/node()"/>
  </xsl:for-each>
</xsl:template>

I should note that this assumes you're getting this from an Ektron collection -- assumption made based on your tagging of this question. This will display the image from each content block in the collection. If you want just the image from the first content block of the collection, you could remove the for-each and instead use something like this:

<xsl:template match="/">
  <xsl:copy-of select="Collection/Content/Html/root/NewsArticle/artThumb/node()"/>
</xsl:template>

Also, it works either way, but i removed the slash from the front of the select on the for-each. Seemed redundant since the code is in a template that already matches on "/".

UPDATE

Some of that can be done in the workarea -- it allows you to set the css class, though I'm not sure if you can set the title attribute of an image. Here's how you could do that via XSLT. In this case, you can't copy the node whole-sale:

<xsl:template match="/">
  <xsl:for-each select="Collection/Content">
    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
    <xsl:variable name="imageId">
      <xsl:text>NewsArticle_</xsl:text>
      <xsl:value-of select="ID" />
      <xsl:text>_image</xsl:text>
    </xsl:variable>
    <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />

    <img id="{ $imageId }" class="myCssClass" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
  </xsl:for-each>
</xsl:template>

(Updated again - appears i misread your comment. Thanks, @MathiasMüller!) When assigning ids to elements like this, I prefer to use a little more than just the content id. In this case, by using "NewsArticle_{Content ID}image", I allow for a container div to use an id "NewsArticle{Content Id}" if it is needed in the future without colliding with the image ids.