在前一篇博文中，我们了解了如何向报表添加图片。这是一个很有用的小技巧，在实际需求中经常会遇到。有时候我们需要在报表中处理成百上千张图片（如产品目录报表），这时我们再用手工的方式输入图片路径，已经非常麻烦，甚至不可能。通常的，我们把图片URL或者名称储存在数据库中。也是因为图片很多，有时候可能会出现图片缺失，或者图片不可访问的情况。这时报表会显示错误图标——这让报表看起来很丑，并且不专业。
本例将展示如何处理这样的情况，以使报表看起来更美观。
准备工作…
我们使用上一示例所创建的报表。为了出现图片缺失的情况，我们还需要到服务器的相关目录下重命名green.jpg为green.jpg.backup。
如何实施…
1. 在上一示例中，我们在报表中添加了图片，并定义了它的conditional URLs。我们现在需要把图片对象替换为HTML对象。
点击工具栏中的Unlock图标解锁报表，然后删除Image列中的图片对象，然后在相同的地方添加一个HTML对象。
2. 选中HTML项目，然后在其属性栏中，设置器HTML Source Variable为‘Traffic’。
3. 为不同的条件定义HTML代码。对于‘red’条件，定义HTML代码为：
<img src="../samples/images/red.jpg" alt="downsell" onError="img2txt(this)"/>
4. 对于‘yellow’，定义HTML代码为：
<img src="../samples/images/yellow.jpg" alt="No Change" onError="img2txt(this)"/>
5. 对于‘green’，定义其HTML代码为：
<img src="../samples/images/green.jpg" alt="Upsell" onError="img2txt(this)"/>
6. 转到Page Explorer，向报表中添加一个HTML，位置在列表之前。
7. 定义此HTML对象代码为：
<script>
function img2txt(img) {
txt = img.alt;
img.parentNode.innerHTML=txt;}
</script>8.运行并测试报表。
如我们所见，当图片缺失时，错误图片自动被我们预定义的文本替换。
这里我们使用自己编写的代码显示图片，而不是使用Report Studio内置的Image组件。
首先我们向报表添加了一个HTML对象，然后通过Traffic变量的三个条件向HTML对象中添加了三段代码。我们通过在代码中使用<img>标签的方式显示图片。<img>标签允许我们定义替换文本和onError事件。我们通过onError事件调用我们编写的img2txt函数。
Img2txt函数使用我们预先在代码中定义的替换文本来替换image列中的HTML代码。因此，如果green.jpg图片丢失，此函数会将HTML代码替换为文本Upsell。
更多…
因为本例我们使用了在浏览器端运行的HTML和JavaScript代码，所以本例只可以在HTML输出中运行。