I'm trying to wrap my text around an Image.
The structure I need to create is as in the picture bellow:
This is what I have tried
I have tried using table which did not succeed. I tough of using text field as html and passing image to it and set the alignment to left, but I found out that it is not possible to pass the image in text field. I started to solve the problem using jaspersoft Studio pro and with its html element. However I could not figure out how to pass the image field from data base as the html source. The expression in the html element is:
"<img src= '$F{Image}' align='left'/> <p>"+$F{KN_Zusatzinfo_DV_Einleitungstext} +"</p>"
This code does not show the image, but a box instead of the image. And the text which is printed is not stretched. The page style which I use is two column. The HTML out put is as in the picture
Using a static path like one bellow to an image works, but it is not an option for me since I need to read the Image from data base:
"<style>.left { float: left; margin-left: 1em; width :40%;}</style><p><img class = left src= C:/Users/iman/JaspersoftWorkspace/Qreport/sample1.png />
If I just use an Image Element with a text box under that the out put and design view are as these pictures:
The HTML source of the html approach is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
a {
text-decoration: none
}
</style>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%"> </td>
<td align="center">
<a name="JR_PAGE_ANCHOR_0_1"></a>
<table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
<tr valign="top" style="height:0">
<td style="width:10px"></td>
<td style="width:20px"></td>
<td style="width:40px"></td>
<td style="width:210px"></td>
<td style="width:32px"></td>
<td style="width:58px"></td>
<td style="width:10px"></td>
<td style="width:182px"></td>
<td style="width:9px"></td>
<td style="width:24px"></td>
</tr>
<tr valign="top" style="height:25px">
<td colspan="10">
</td>
</tr>
<tr valign="top" style="height:5px">
<td colspan="6">
</td>
<td colspan="3" rowspan="2" style="text-indent: 0px; text-align: right;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert (Konventionell chirurgisch)</span>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:20px">
<td>
</td>
<td colspan="2" style="text-indent: 0px; text-align: left;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
</td>
<td colspan="3">
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:20px">
<td colspan="7">
</td>
<td colspan="2" style="text-indent: 0px; text-align: right;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Dr XYZ</span>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:88px">
<td colspan="10">
</td>
</tr>
<tr valign="top" style="height:74px">
<td colspan="5">
</td>
<td colspan="3" rowspan="2">
<div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
<img src='((java.awt.Image)field_Image.getValue())' align='left' />
<p>Bei der Aortenklappe handelt es sich um das ?Ventil“ zwischen der linken HerzkeAortenklappenchirurgie, isoliert - konventionell - Aortenklappenchirurgie, isoliert - kathetergestützt Die Qualit?tsindikatoren der k........
appenchirauch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualit?tsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
</div>
</td>
<td colspan="2">
</td>
</tr>
<tr valign="top" style="height:16px">
<td colspan="2">
</td>
<td colspan="2" rowspan="2">
<div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
<img src='((java.awt.Image)field_Image.getValue())' align='left' />
<p>Bei der Aortenklappe handelt es sich um das ?Ventil“ zwischen der linken Herzkammer und der Hauptschlagader (Aorta). Schlie?t die Klappe nicht mehr dicht, spriit?tsindikatoren der konventionellen Aortenklappenchirurgie fokussieren schwere Komplikationen und Sterblichkeit.
Bei der kathetergestützten Aortenklappenchirurgie wird darüber hinaus auch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualit?tsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
</div>
</td>
<td>
</td>
<td colspan="2">
</td>
</tr>
<tr valign="top" style="height:74px">
<td colspan="2">
</td>
<td colspan="6">
</td>
</tr>
<tr valign="top" style="height:520px">
<td colspan="10">
</td>
</tr>
</table>
<br/>
<br/>
<a name="JR_PAGE_ANCHOR_0_2"></a>
<table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
<tr valign="top" style="height:0">
<td style="width:10px"></td>
...
<td style="width:24px"></td>
</tr>
<tr valign="top" style="height:27px">
<td colspan="7">
</td>
</tr>
<tr valign="top" style="height:20px">
<td>
</td>
<td colspan="2" style="text-indent: 0px; text-align: left;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
</td>
<td colspan="4">
</td>
</tr>
<tr valign="top" style="height:7px">
<td colspan="7">
</td>
</tr>
<tr valign="top" style="height:21px">
<td colspan="5">
</td>
<td style="text-indent: 0px; text-align: right;">
<span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
</td>
<td>
</td>
</tr>
<tr valign="top" style="height:125px">
<td colspan="7">
</td>
</tr>
<tr valign="top" style="height:90px">
<td colspan="2">
</td>
<td colspan="2">
<div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
<img src='((java.awt.Image)field_Image.getValue())' align='left' />
<p>....deleted some text because it exceeded the limit..</p>
</div>
</td>
<td colspan="3">
</td>
</tr>
<tr valign="top" style="height:552px">
<td colspan="7">
</td>
</tr>
</table>
<br/>
<br/>
<a name="JR_PAGE_ANCHOR_0_3"></a>
<table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
<tr valign="top" style="height:0">
<td style="width:595px"></td>
</tr>
<tr valign="top" style="height:842px">
<td>
</td>
</tr>
</table>
<![if IE]>
<script>
var links = document.querySelectorAll('link.jrWebFont');
setTimeout(function() {
if (links) {
for (var i = 0; i < links.length; i++) {
links.item(i).href = links.item(i).href;
}
}
}, 0);
</script>
<![endif]>
</td>
<td width="50%"> </td>
</tr>
</table>
</body>
</html>
And the HTML source of the Image element plus text field is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
a {
text-decoration: none
}
</style>
</head>
<body text="#000000" link="#000000" alink="#000000"