Displaying Images from a Database

This example displays an image based on a binary image field from a database.  An HTML layout page is created with one FieldValue code generation tag for each database field to be displayed.  This example illustrates:

1. How different FieldValue tags can display data in different formats.

2. How to display an image stored in the database.

3. How to use the Properties tab in the Page Properties dialog to specify pass-through attributes.

Description

Generated Page

Layout Page File

 
     <div align="center">

          <GEN:Table Name="Employees">

          <table cellpadding="5" style="border-collapse: collapse" border="1" bordercolorlight="#C0C0C0"

                        bordercolordark="#C0C0C0">

              <GEN:ItemTemplate>

              <tr style="font-family:Verdana; font-size:10px">

                   <td>

                        <GEN:FieldValue Name="FirstName" />&nbsp;<GEN:FieldValue Name="LastName" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="Photo"/>

                   </td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

Step 1:  Select the Employees table and the appropriate fields for the First Name and Last Name.

Step 2:  Set the Display Style property to Image for the Photo field.

Step 3:  Select the Properties tab and modify a pass-through attribute called ImageUrlFormat.  Since the image is stored as a binary field in Microsoft SQL Server, the generated application must return the binary data as a stream of data instead of specifying a static file in the HTML IMG tag.  This is accomplished by a special ASPX page written by Iron Speed engineers to display the image from a database.  This page is in the applications directory and must be used in the ImageUrlFormat pass-through attribute.  The ImageUrlFormat attribute is automatically initialized to:

..\ExportFieldValue.aspx?Table=Employees&Field=Photo&Record={0}&Offset=0

This format indicates to Iron Speed Designer to use the ExportFieldValue.aspx page in your application directory as the program to display the image.

..\ExportFieldValue.aspx?Table=Employees&Field=Photo&Record={0}&Offset=78

The Offset must be changed to 78 because the Northwind database and its copy Southwind contain a 78-byte header.  This header is an OLE DB header that was placed by Microsoft.  Images stored by you may not have a header or may have a smaller or larger header.  The Offset indicates the size of the header.

Step 4:  Build the application.

Step 5:  Open a new browser and enter this URL to display the page:

http://localhost/Tutorial/Tutorial Pages/EmployeePhoto.aspx