Evaluating images in HTML widget using QGIS

Question

I would like to have images displayed in my HTML widget.

Unfortunately, the initial script generated by QGIS doesn't work.

 <tr>
 <td>Images</td>
 <td><script>document.write(expression.evaluate("\"Image\""));</script></td>
 </tr>

It comes with the text string only.

I found some solution at Display photo stored as blob in GPKG but it shows a Python function instead of a front-end solution.

I need my image related to the feature, but not in the HTML display section, but in HTML widget - see Show images related to features in QGIS?

There are some solutions here but don't work in my case:

• https://stackoverflow.com/questions/29910137/how-to-document-write-within-an-image-src-string-doesnt-get-parsed
• https://stackoverflow.com/questions/22503908/html-is-img-src-scriptsome-javascript-script-allowed
• https://stackoverflow.com/questions/116967/img-src-tags-and-javascript

Is there any way to show in the HTML widget the image related to my object?

enter image description here

Even if I place the link to static image, the problem is the same:

 <tr>
 <td>Images</td>
 <td><img src = "Supporting_Docs\Images\S1.jpg" width="300" height="225" 
 alt="Alias Name"/></td>
 </tr>

enter image description here

• Babel: Does inserting a start and end tag for table help? <table> </table> See: w3.org/TR/html401/struct/tables.html#h-11.2.1

Answer 1

For a static image, you can try the following. Note that I am using an absolute local path with 3 slashes.

<div>Image: <img src = 'file:///D:\temp50円k.png' width='300' height='225' alt='Alias Name'></img></div>

For a dynamic image, you need to build the path. In my example the field photo contains a path like D:\temp50円k.png

<script>document.write(expression.evaluate("'<div>Image: <img src = \"file:///'|| photo ||'\" width=\"300\" height=\"225\" alt=\"Alias Name\"/></div>'"));</script>

The HTML widget it very powerful... but is also very sensitive to quotes, escaping, new lines etc. My tip is to start with a very simple output and to build around it, making and testing one change at a time. It is also useful to do a right click on the preview + inspect and to compare with the input (ex: the path D:\temp50円k.png was changed for file:///D:emp(k.png if I write the true image path instead of reading it from a field, pointing to escaping issues)

To finish, you can try to move part of the html out of the <script> section.... be very careful how the output(s) are appended to each others.

• Geographos: The first one is fine. The second one doesn't work. My image path is related to the project. I tried to put both a full path from my disk as well as the related to my project <img src = \"file:///Supporting_Docs\Images\'|| Image ||'\" width=\"300\" height=\"225\" alt=\"Alias Name\"/></div>'" is that alright then?
• JGH: @MKR I don't know for the relative path. The example I provided do work here, so try the inspect trick to see how your path is interpreted