In the previous recipe, we saw how to add images to the report. You will be using that technique in many cases, some involving hundreds of images (For example, Product Catalogue).
There will often be a case in which database has a URL or image name, whereas the corresponding image is either missing or inaccessible. In such a case, the web browser shows an error symbol. This looks quite ugly and needs to be handled properly.
In this recipe, we will see how to handle this problem gracefully.
We will use the report prepared in previous recipe. We need to delete the Green.jpg file (or rename it to something else) from the server, in order to create the missing image scenario.
-
In the previous recipe, we added an image object and defined its conditional URLs. We need to replace that image with an HTML Item. For that, unlock the report objects
and delete the image component. Add an HTML Item in the same column.
- Select this HTML item and from the Properties pane, set its HTML Source Variable to 'Traffic'. (Please note that we already have this conditional variable in the last recipe).
- Now define the HTML for different conditions. Start with 'red'. Choose 'red' from conditional explorer and define the HTML as:
<img src="../samples/images/red.jpg" alt="downsell" onError="img2txt(this)"/> - For 'yellow', define the HTML as:
<img src="../samples/images/yellow.jpg" alt="No Change" onError="img2txt(this)"/> - For 'green', define HTML as:
<img src="../samples/images/green.jpg" alt="Upsell" onError="img2txt(this)"/> - Now go back to the No Variable state by double clicking on the green bar, and add another HTML item on the report. Put it just before the list.
- Define this HTML as:
<script> function img2txt(img) { txt = img.alt; img.parentNode.innerHTML=txt;} </script> - Now run the report to test it.
As you can see, if the image is missing, the report will now handle it gracefully and show some text instead of an error image.
Here we are using our custom code to display the image, instead of using CRS's in-built Image component.
We have pulled an HTML item onto the report and defined it to display different images depending on the condition using the <img> tag. This tag allows us to define an alternative text and onError event as well. We are using the onError event to call our custom made JavaScript function called img2txt.
This function replaces the HTML item with a text which was originally defined as 'alternative text'. Hence, if green.jpg is missing, this function will replace it with a text item Upsell.