Displaying Images Based on URLs from a Database

This example displays an image based on the image URL 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 enclose the field value in an HTML IMG tag.

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="PhotoPath"/>

                   </td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

Step 1:  In the Bindings tab of the Page Properties dialog, select the Employees table and the appropriate database fields for the First Name, Last Name and Photo Path code generation tags.

Step 2:  In the Display tab of the Page Properties dialog, set the Display Style property to Literal for the PhotoPath tag.

Step 3:  To display the field value as an image, enclose it within an HTML <img> tag in the HTML layout page using either Iron Speed Designer’s editor or the editor of your choice.

<img src='<GEN:FieldValue NAME="PhotoPath" />'  />

Step 4:  Build and run the application.