Application Techniques

Displaying Images in a Data View

How to display data-bound images inside a data view on a page.

About this technique



HTML Client Techniques> HTML-based views


You'll learn about:

Related reading

See the chapter on using HTML-based views in the Programmer's Guide

The approach illustrated here uses a label control, not an image control. You will set the label to be in raw HTML mode and tell it to generate HTML code that produces an image for each row based on the data.

Setting up   Top of page

Set up the image files and database as follows:

  1. Upload the images to Media (optional). If you upload the images, the path to retrieve them will be consistent and they will be easily managed as part of your SilverStream application.

  2. Create a database that has a column to store file names for the image files.

  3. Enter data for the file name column. These entries should be consistent. You will probably either enter the entire path, including the file name, or just the portion of the pathname.ext that changes.

Associating a database with the page   Top of page

If you chose one of the HTML form page wizards when you created the page, you will already have associated a database with it.

If you chose the static page wizard, you will need to associate a database with the page by selecting the desired database in the Relational Data Palette.

Creating the data view control   Top of page

In this step, you create a data view control and associate it with data.

  1. Drop a data view control onto the page.

  2. In the Property Inspector, set its Table Name property to the desired database.

  3. Enter a Link Clause in the Property Inspector that will result in some rows to display. For example:

      tblEmployees.imageFile <> "" 

Creating the label control   Top of page

In this step, you create a label control and sets its properties.

  1. Drop a label control into the desired column of the second row of the data view.

  2. Leave its Type as LABEL in the Property Inspector.

  3. Enter an expression in the Property Inspector that looks like this:

      "<img src=\"../Objectstore/Images/" + 
        tblEmployees.imageFile + ".gif\">" 

    The expression will be evaluated at runtime for each row shown in the data view.

Notes about the label expression

Setting the label to raw HTML mode   Top of page

This step illustrates how to set the label control to in raw HTML mode. This is important because it means you do not have to escape any HTML tags in the expression.

Notes about the code

Testing the page   Top of page

Try running the page. If you don't see the desired effect, view the source in the browser. It should have lines that look like this where the images are supposed to appear:

  <img src="../Objectstore/Images/filename.gif"> 

Copyright © 2000, SilverStream Software, Inc. All rights reserved.