Evaluación de imágenes en el widget HTML con QGIS

Question

Me gustaría que las imágenes se mostraran en mi widget HTML.

Desafortunadamente, el script inicial generado por QGIS no funciona.

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

Viene con la cadena de texto solamente.

He encontrado alguna solución en Mostrar foto almacenada como blob en GPKG pero muestra una función de Python en lugar de una solución frontal.

Necesito mi imagen relacionada con la función, pero no en la sección de visualización HTML, sino en el widget HTML - ver ¿Mostrar imágenes relacionadas con características en QGIS?

Hay algunas soluciones aquí pero no funcionan en mi caso:

• 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-permitido
• https://stackoverflow.com/questions/116967/img-src-tags-and-javascript

¿Hay alguna manera de mostrar en el widget HTML la imagen relacionada con mi objeto?

Incluso si coloco el enlace a la imagen estática, el problema es el mismo:

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

Answer 1

Para una imagen estática, puedes probar lo siguiente. Tenga en cuenta que estoy usando una ruta local absoluta con 3 tajos.

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

Para una imagen dinámica, es necesario construir la ruta. En mi ejemplo el campo photo contiene una ruta como D:\temp\50k.png

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

El widget HTML es muy potente... pero también es muy sensible a las comillas, al escape, a las nuevas líneas, etc. Mi consejo es comenzar con una salida muy simple y construir alrededor de ella, haciendo y probando un cambio a la vez. También es útil hacer un clic derecho en la vista previa + inspect y comparar con la entrada (por ejemplo, la ruta D:\temp\50k.png se cambió por file:///D:emp(k.png si escribo la verdadera ruta de la imagen en lugar de leerla desde un campo, señalando problemas de escape)

Para terminar, puedes intentar mover parte del html fuera del <script> sección.... tenga mucho cuidado con la forma en que se anexan las salidas.