Q&A: conditionally showing pictures

Q&A: conditionally showing pictures

Q: Do you know if there is a way to detect if an image is available or not?
I have an application where with the article number an image is called.
But not every article has an image thus then a red cross appears.
What I would like to have is instead of that red cross an image that says that there is no picture for this article?
Do you know anything?

A: If I understand correctly, you have pictures kept in the database associated with articles, correct?
My suggestion is, then, to only conditionally show the picture, based on a test made on the existence of the picture database record or even checking the size of the binary field (you can use “BinaryData” extension for this). If no picture is available then you can show a “static” image (from the eSpace picture list).

Q: This question was not about pictures from a database but from the (server) file system.
I access it via an escape expression with the html tag
<img src=”…”>

In my design I have written that we are going to implement image-tables but for now I have to use the HTML approach..

A: Then, perhaps you can use “FileSystem” extension to, during preparation, check for the existence of the file and use it to decide the correct behaviour.
I had the following situation:

In an eSpace I had to show Articles and their related data.
Besides that an image of the article is shown.

These images reside in a virtual directory on the IIS webserver. To find the right image with the right article we had a simple approach: the name of the article is unique and therefore the related image was given the article name.

There was only 1 problem: not every article had an image. And in case of calling a non existing image a box with a red cross appeared. This is kind of ugly so I tried to find a conditional way to show the picture and when it was not available I'll show an image containing the message 'no image available'.

Since the images are on the webserver a solution concerning tables and binary data was not applicable. Also the FileExists action from the FileSystem extension does not work because this action needs a correct path like "c:\path\dir\etc".

My solution for conditionally showing the image is as follows:
1. Add an image to the image-tree in service studio. This will act as our image-placeholder; the image itself is not important.
2. Create an image that you will show when there is no image, name it like "no_image.jpg" and add it also to the image tree.
3. Place the image-placeholder where you want on a webpage in service studio.
4. In the Image Properties:
a. Choose a name, for instance imgArticle. (Important, without this it won't work)
b. Choose for Type : External
c. Create a local variable (e.g. imgLocation) and choose this variable for the URL. I use this variable in the screen preparation to point it to the virtual IIS directory, together with the article name, to get the image.
d. Optional: Set a height and width: this will force the images to be shown in the same size. Preferably you have all your images in this size to avoid artefacts.
5. Go to the Extended properties and create the following entry:
a. Name: onError, Value: "getNoImg();"

The reason I use a javascript function call instead of placing the code directly here is that with this approach you can easily reuse this functionality through the eSpace.

6. So, fill in the following JavaScript code in the "eSpace JavaScript" tab of the Extended Properties:

function getNoImg() {
document.getElementById('wtimgArticle').src = "img/no_image.jpg";

2 remarks: you can access the element by using its name together with the 'wt' prefix and the 'no_image' is runtime accessible via the 'img/*' construction.

Keep in mind that this still is a workaround, but it is a workable one :)
Hi Hans,

I believe the onError handler works only in IE.

Here's another solution (I haven't tested it, but it seems ok):
Hi Paulo,

The onError event is supported by Firefox (1.0), netscape(3.0) and IE(4.0).
I tested it on IE and FF and it worked. (it works even slightly better in FF ;) )


I tryed your solution and I can have it woking on the main webscreen. When trying with the picture inside a "Table Records" or on a "Web Block", it doesn't work. I always get the error message:

"Message: 'document.getElementById(...)' is null or not an object"

Am I doing something wrong?

Thank you