Images in HTML Template

AppSheet AppSheet Q&A
, ,
1

I’ve been testing and learning how to use HTML templates to generate PDFs, but my problem is with the images, which don’t always load into the document and I don’t understand why.

1.- I understand that if I have an image saved in Drive and enable anyone with the link to access it, it should be enough to use it in the HTML.

This is how I’m adding the image to the HTML.

<p><img src="https://drive.google.com/drive/folders/123c9A0xHPtBcqDUdPD5EbGSm3iGiNRUM"></p>

2.- As for the images that I attach to the HTML from appsheet, this is how I managed to visualize them…

 <p><<Start: [Related Imagenes EcoCardios]>>
    <table>
        <tr>
        <<[Imagen]>>
        </tr>
        <tr>
        <<If:ISNOTBLANK([Referencia])>><td>Referencia</td> 
        <td class="blod"><<[Referencia]>></td> 
        <<EndIf>>
        </tr>
        <tr>
        <<If:ISNOTBLANK([Descripción])>>
        <td>Descripción</td>
        <td class="blod"><<[Descripción]>></td> <<EndIf>>
        </tr>
   </table>
   <<End>></p>

The problem is that it doesn’t let me wrap the images in or so that they appear within the table.

I hope someone can guide me, thanks

1 Like
2

You need to use the correct URL though. For one, that’s a URL to a GDrive folder, not even a file. Even if you grab the sharing link for the file itself, its actually a link to a GDrive “viewer” of the file, not directly to the file. Take the id of the file (from the share link) and append it to this URL base:

https://drive.google.com/uc?export=view&id=

As for #2, why exactly isn’t it letting you wrap the images in or ? @SkrOYC can probably help there.

2 Likes
3

okay I understand

when i try it gives me the following error

Captura de pantalla 2023-04-18 144228.png

apparently it refers to the = of id=
I try changing the = to ; but it gives me the following error

Captura de pantalla 2023-04-18 144903.png

4

Update:
The image shared from GDrive can have one of 3 roles.

Captura de pantalla 2023-04-18 162946.png
Captura de pantalla 2023-04-18 162946.png594×285 30 KB

With the read role I was able to upload the image to the PDF using the way I had previously described.

1 Like
5

Echa un vistazo a esta info:

Re: I’m looking for dificult template use cases! - Google Cloud Community
1 Like
6

[quote=“SkrOYC”]

[/quote]> Echa un vistazo a esta info:> > ##### Re: I’m looking for dificult template use cases! - Google Cloud Community

Al agregar el format rule en la [Imagen] se soluciono el problema de las etiquetas y logre agregar las imágenes a la tabla sin problema.

El problema que ahora me tiene vuelto loco es la imagen del logo, ya que la imagen no está dentro de ninguna de mis tablas, estaba usando:

pero no me está funcionando esa forma de agregar la imágen

@SkrOYC me recomiendas agregar la imágen del logo a alguna de mis tablas, aplicarle el formato de texto y finalmente llamarla en el HTML con…

<p><img src="<<ANY(Select(Tabla[Imagen],[Imagen]=Logo))>>"></p>

?
ó qué sintaxis me recomiendas usar?

7

Te recomiendo lo que mencionas al final, meterla a través de la app.
AppSheet va a generar una URL pública cada vez que hagas un llamado a un campo de contenido, como los File o Image

8

Lo he estado intentando pero el PDF nunca se genera, en el monitor de automatización me da el siguiente error:

Captura de pantalla 2023-04-20 224036.png
Captura de pantalla 2023-04-20 224036.png357×257 6.66 KB

9

Comparte la expresión que estás usando.

Ten cuidado con los caracteres especiales en HTML o CSS

10

he probado con las siguientes:

1.- <p><img src="<<ANY(SELECT(Características[Imagen],[Órgano] = Logo))>>"></p>

2.- <p><img src="<<ANY(SELECT(Características[Imagen],[Órgano] = "Logo"))>>"></p>

3.- <p><img src="<<ANY(SELECT(Características[Imagen],[Órgano] = "Logo"))>>"></p>

4.- <p><img src="<<ANY(SELECT(Características[Imagen],[Órgano] = "Logo"))>>"></p>

5.- <p><img src="<<ANY(SELECT(Características[Imagen],[Órgano] = "Logo"))>>"></p>
11 
<p><img src="<<ANY(SELECT(Características[Imagen],[Órgano]='Logo'))>>"></p>
1 Like
12

ya probé tu sugerencia pero sigo obteniendo el mismo error.
Me llama la atención que cuando borro esta linea del html, todo funciona con normalidad

creo que mi falta de conocimiento en html y css puede estar causando el problema, aquí te dejo una copia del html que estoy usando https://drive.google.com/file/d/12sQM1pFK2uHVDSqzpKeoDSlMrODgSZJF/view?usp=sharing
yo sé que es un desastre pero tenme paciencia es mi primer reporte en html

13

Aplicaste el format rule en esa columna?

14

sí, tanto para la imagen de logo como para las imágenes de los ecocardios

15

He estado revisando y no logro encontrar problemas con el código.

Intenta darle un Width después del src

16

Lo intenté, y sigo intentando con todas las formas que se me ocurren de llamar a una imagen que no esté directamente relacionada con la tabla que acciona el bot, he intentado distintas fórmulas y en todos los casos se presenta el mismo inconveniente.

17

Mete la expresión dentro de un P sin el IMG para ver qué está retornando

18

Regresa la imagen casualmente centrada

Me parece muy raro porque tengo activado el format rule que convierte a texto la imagen del logo y aún así me muestra la imagen.
No se puede controlar el tamaño de la imagen ni su alineación desde la etiqueta IMG ya que no existe

si meto la expresión en un TEXT() me regresa
Características::Características_Images/LOGO.Imagen.021222.png

En cuanto a las otras imágenes ([Related Imágenes]) funciona de forma esperada, quitando la etiqueta IMG regresa texto

19

Por favor, envíanos un screenshot de la configuración de tu Format Rule para esa columna

20

formatrulelogotexto.png
formatrulelogotexto.png643×896 61.9 KB