XSLT picure conversion

Question

Considering the following XSLT, which I know is not correct.

I want to extract some data from the database into an XML file and using this XSLT to obtain a HTML table. I am doing the following.

1. extract in a IDataReader - an ojbect[3] containing:
   • "ALFKI"
   • "Obere str.57"
   • a byte[14205] (id and picture)
2. I load the IDataReader into a MemoryStream
3. I apply the XSL to the MemoryStream, I obtain a string as the result

The problem is that I can't handle the picture situation - in my database I have the actual picture, not the path to it.

What are the modifications to be done?

<xsl:stylesheet 
  xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
  version='1.0'
>
  <xsl:template match='CustomersOrdersDataSet'>
    <STYLE>
      BODY {
        font-family: verdana;
        font-size: 9pt;
      } 
      TD {
        font-size: 8pt
      }
    </STYLE>
    <TABLE WIDTH='100%' BORDER='0'>
      <xsl:apply-templates select='CustomersOrders' />
    </TABLE>
  </xsl:template>

  <xsl:template match='CustomersOrders'>
    <TABLE WIDTH='100%' HEIGHT='100' BORDER='0'>
      <TR>
        <TD valign='top'>
          <B>Customer ID:</B>
        </TD>
        <TD valign='top'>
          <xsl:value-of select='CustID' />
        </TD>
      </TR>
      <TR>
        <TD valign='top'>
          <B>Customer Address:</B>
        </TD>
        <TD valign='top'>
          <xsl:value-of select='CustomerAddress' />
        </TD>
      </TR>
      <TR>
        <TD valign='top'>
          <B>Picture:</B>
        </TD>
        <TD valign='top'>
          <xsl:value-of select='Picture' />
        </TD>
      </TR>
    </TABLE>
  </xsl:template>
</xsl:stylesheet>

Answer 1

If you have the picture in the database only then you will need to write a handler to pull the picture from the database and display it within an image tag. The best way would be to write a custom .ashx handler that does this and then call it from the image tag generated via your XSLT eg.

<img src="ImgHandler.ashx?imgid=1" width="50" height="50" alt="alttext" />

There is an article on CodeProject here which should help.

Answer 2

If the <Picture> is output as Base64-encoded in the XML, you could embed it right into the HTML like this:

<!-- ... -->
<TD valign='top'>
  <!-- needs to be the correct MIME type, obviously -->
  <img alt="Embedded Image" src="
    {concat('data:image/png;base64,', Picture)}
  " />
</TD>
<!-- ... -->

Firefox understand this, IE does not (IIRC) - so this is not the most portable approach.

Apart from that, it inflates the result document and user agents cannot cache the image individually.