nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Embedded image not being displayed

Cain

I'm trying to embed an image in the report and render it as HTML. The problem is, the HTML emitter seems to be adding a div around the TextItem with the style="overflow:hidden;" which causes the image to not be displayed. I can't for the life of me figure out how to stop the style from being added to the div. Here's what's being generated:
<pre class="_prettyXprint">
<div style=" overflow:hidden;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="/></div></pre>
The red dot image isn't exactly what I'm trying to display, the real image is much larger. The encoding is just a lot smaller for the purposes of this post.
 
Code that adds the item to the report:
 
<div>
<pre class="_prettyXprint">
TextItemHandle textItem = this.reportDesign.getElementFactory().newTextItem("chart");
textItem.setContentType(DesignChoiceConstants.TEXT_CONTENT_TYPE_HTML);
textItem.setContent("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==");
this.reportDesign.getHandle().getBody().add(textItem);</pre>
</div>

Find more posts tagged with

Comments

JFreeman

As this is intended for an HTML view, one option would be to hook the parent node and modify its overflow style property client side.
 
For example, I gave the img element an id of "myImage1" and then added the following script to the text element:
<pre class="_prettyXprint _lang-js">
<script>
var myImage = document.getElementById("myImage1");
myImage.parentNode.style.overflow = "visible";
</script>
</pre>

Archana Karnik

Hi,
 
I am developing a report using BIRT 4.3.2. 
In one field i am using an Embedded Images. The name of this image is coming from the data. Which i am able to manage very well.
 
Now what i want to do is, if image mentioned in the data is not available in the resources i want to display a blank instead of default error thrown by BIRT, "The resource of this report item is not reachable."
 
If the name of an image is null then in that case I am able to set display property to none. But how can I display a customized error if the name is not null and image with that name is not in resources. 
 
 
Thanks in advance.