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?

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>

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:\temp\50k.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:\temp\50k.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:\temp\50k.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.