FiveTech Software tech support forums

www.FiveTechSoft.com
https://forums.fivetechsupport.com/

webview2 and images

https://forums.fivetechsupport.com/viewtopic.php?t=45562

Page 1 of 2

webview2 and images

Posted: Mon Mar 24, 2025 11:00 pm
by Silvio.Falconi
I tried to show an image on html with Twebview2

Code: Select all | Expand

 <div class="quick-item" onclick="callHarbourFunction('Clienti')">
                           <img src="img/clienti.png" alt="Clienti">
                           <div>Clienti</div>
                       </div>
the problem is basically that the html page does not actually exist physically because I load it into memory. If the HTML page does not exist as a physical file but is dynamically loaded into memory inside TWebView, then the paths relative to the local files may not work correctly. I have tried several solutions


I tried to insert the path of the images with local

Code: Select all | Expand

cFolder := cFilePath( GetModuleFileName( GetInstance() ) ) + "img/"
but it doesn't work

then I tried on the browser file:///C:/Work/errori/webview/img/clienti.png

the image opens from the browser but doesn't appear in TWebView, then the problem is due to TWebView that blocks the loading of local resources

chatgpt suggests me to set this parameter oWebView:lAllowLocalContent := .T. but it gives me an error telling me that it can't find this variable

TWebView2 doesn't know where to look for images

When you load an HTML file from disk, the browser knows that the path img/clienti.png means "img folder next to the HTML file".

If you instead generate the HTML in memory, TWebView doesn't have a reference path, so it doesn't find local images.

WebView2 may treat the HTML as a temporary file





Any solution ?

Re: webview2 and images

Posted: Tue Mar 25, 2025 1:40 am
by Lailton
You can convert it to base64encode and use it on the HTML

Example for PNG but you can adjust to jpeg etc.

Code: Select all | Expand

function image2base64( cFile )
return "data:image/png;base64," + hb_base64encode( hb_memoRead( cFile ) )

Re: webview2 and images

Posted: Tue Mar 25, 2025 10:02 am
by Silvio.Falconi
Lailton wrote: Tue Mar 25, 2025 1:40 am You can convert it to base64encode and use it on the HTML

Example for PNG but you can adjust to jpeg etc.

Code: Select all | Expand

function image2base64( cFile )
return "data:image/png;base64," + hb_base64encode( hb_memoRead( cFile ) )

not run!!

I made sample

LOCAL cHtml
LOCAL cImgHome := image2base64( "img/home.png" )

TEXT INTO cHtml
<!DOCTYPE html>
<html lang="it">

<span class="section-title"><img src="{cImgHome}" alt="Home"> home</span>
</body>
</html>
ENDTEXT

hb_StrReplace( cHtml, "{cImgHome}", cImgHome )

Re: webview2 and images

Posted: Tue Mar 25, 2025 4:07 pm
by Lailton
Probably the PATH was not found, try full path, something like:
"/www/var/img/home.png"
It should be able to READ file and convert to base64.

also here I think that should be:

Code: Select all | Expand

cHtml := hb_StrReplace( cHtml, "{cImgHome}", cImgHome )

Re: webview2 and images

Posted: Tue Mar 25, 2025 8:41 pm
by Silvio.Falconi
There Is not. Any www
The HTML Is on Memory
The HTML not exist It Is load on Memory

Re: webview2 and images

Posted: Tue Mar 25, 2025 10:38 pm
by cnavarro
Silvio, full path of image file

Re: webview2 and images

Posted: Tue Mar 25, 2025 10:44 pm
by cmsoft
Con las indicaciones de Laiton, e indicando el nombre completo de la ruta, el programa funciona como es esperado
Image
El codigo que use fue el propuesto por Laiton

Code: Select all | Expand

cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\fwh21\bitmaps\pngs\2.png' ) )
oDashBoard:cHtml := '<!DOCTYPE html> '+;
                            '<html lang="it"> '+;
                            '<span class="section-title"><img src="'+cImgHome+'" alt="Home"> home</span>'+;
                            '</body>'+;
                            '</html>'
Tambien puedes usar la ruta relativa, tambien me funcionó

Code: Select all | Expand

'..\bitmaps\pngs\2.png'
Use como ejemple el pinguino que esta en la carpeta bitmaps/pngs

Re: webview2 and images

Posted: Wed Mar 26, 2025 8:12 am
by Silvio.Falconi
cmsoft wrote: Tue Mar 25, 2025 10:44 pm Con las indicaciones de Laiton, e indicando el nombre completo de la ruta, el programa funciona como es esperado
Image
El codigo que use fue el propuesto por Laiton

Code: Select all | Expand

cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\fwh21\bitmaps\pngs\2.png' ) )
oDashBoard:cHtml := '<!DOCTYPE html> '+;
                            '<html lang="it"> '+;
                            '<span class="section-title"><img src="'+cImgHome+'" alt="Home"> home</span>'+;
                            '</body>'+;
                            '</html>'
Tambien puedes usar la ruta relativa, tambien me funcionó

Code: Select all | Expand

'..\bitmaps\pngs\2.png'
Use como ejemple el pinguino que esta en la carpeta bitmaps/pngs

Cesar,
I have the exe on Root webview3 and the image pngs into /img sample img\home.png


I tried with

FUNCTION Html()
LOCAL cHtml
local cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\work\fwh\bitmaps\pngs\2.png' ) )
TEXT INTO cHtml
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>

</head>
<body>
<div class="container">
<div class="left-column">
<div class="box">
<span class="section-title">
<img src="'+cImgHome+'" alt="Home"> TITLE HOME</span>
<a href="#" onclick="callHarbourFunction('Home'); return false;"><img src="'+cImgHome+'" alt="home"> title1</a>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</body>
</html>
ENDTEXT
RETURN cHtml

Re: webview2 and images

Posted: Wed Mar 26, 2025 8:47 am
by Silvio.Falconi
if I made this

Code: Select all | Expand

Function html()
    LOCAL cHtml
    cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\work\fwh\bitmaps\pngs\2.png' ) )

    TEXT INTO cHtml
     <!DOCTYPE html>
     <html lang="it">
     <span class="section-title">
         <img src=cImgHome alt="Home"> home</span>
         </body>
         </html>
            ENDTEXT
    return cHtml

Not run


If I made

Code: Select all | Expand

Function html()
    cImgHome := "data:image/png;base64," +;
    hb_base64encode( hb_memoRead( 'c:\work\fwh\bitmaps\pngs\2.png' ) )
cHtml := '<!DOCTYPE html> '+;
         '<html lang="it"> '+'<span class="section-title"><img src="'+cImgHome+'" alt="Home"> home</span>'+;
         '</body>'+;
        '</html>'

         return cHtml

run ok



So when I use TEXT INTO cHtml why there are problems ?

Re: webview2 and images

Posted: Wed Mar 26, 2025 8:56 am
by Silvio.Falconi
if I made

Code: Select all | Expand

Function html()
    LOCAL cHtml
    cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\work\fwh\bitmaps\pngs\2.png' ) )

    TEXT INTO cHtml
     <!DOCTYPE html>
     <html lang="it">
     <span class="section-title">
         <img src=&cImgHome alt="Home"> home</span>
         </body>
         </html>
         ENDTEXT

         msginfo(cHtml)

    return cHtml

Run ok


Why ? I must use macro ? <img src=&cImgHome alt="Home"> home</span>

Re: webview2 and images

Posted: Wed Mar 26, 2025 10:30 am
by Silvio.Falconi
I have the images on .\img

I make

Code: Select all | Expand

#include "fivewin.ch"

FUNCTION Main()
   LOCAL cHtml
   LOCAL oWebView := TWebView2():New()

   // Genera il contenuto HTML con immagini Base64
   cHtml := Html()

   // Carica l'HTML direttamente in memoria
   oWebView:SetHtml( cHtml )
   oWebView:SetTitle( "Dashboard" )
   oWebView:SetSize( 1024, 768 )
   oWebView:Run()
   oWebView:Destroy()

   RETURN NIL

Function html()
    local cImagesPath := cFilePath( GetModuleFileName( GetInstance() ) )+"\img\"
    local cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( cImagesPath+'home.png' ) )
    local  cHtml

      TEXT INTO cHtml

     <!DOCTYPE html>
     <html lang="it">
     <span class="section-title">
  <img src="'"+cImgHome+"'"  alt="Home"> home</span>
         </body>
         </html>

         ENDTEXT

     return cHtml

If I make Msginfo(cImgHome)
Ihave this

Image


So th eimage is loaded but then when I put i tinto chtml not run

Re: webview2 and images

Posted: Wed Mar 26, 2025 10:45 am
by Silvio.Falconi
QWEN (another AI) sad me this and RUN OK

Code: Select all | Expand

#include "fivewin.ch"

FUNCTION Main()
   LOCAL cHtml
   LOCAL oWebView := TWebView2():New()

   // Genera il contenuto HTML con immagini Base64
   cHtml := Html()

   // Carica l'HTML direttamente in memoria
   oWebView:SetHtml( cHtml )
   oWebView:SetTitle( "Dashboard" )
   oWebView:SetSize( 1024, 768 )
   oWebView:Run()
   oWebView:Destroy()

   RETURN NIL

Function Html()
    local cImagesPath := cFilePath( GetModuleFileName( GetInstance() ) ) + "\img\"
    local cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( cImagesPath + "home.png" ) )
    local cHtml

    // Usa TEXT INTO per la parte statica dell'HTML
    TEXT INTO cHtml
        <!DOCTYPE html>
        <html lang="it">
        <head>
            <title>Dashboard</title>
        </head>
        <body>
            <span class="section-title">
                <img src="{IMGSRC}" alt="Home"> home
            </span>
        </body>
        </html>
    ENDTEXT

    // Sostituisci il segnaposto {IMGSRC} con il valore di cImgHome
    cHtml := StrTran( cHtml, "{IMGSRC}", cImgHome )

    return cHtml
Image



Information

TEXT INTO Block:

The TEXT INTO cHtml block defines the static HTML structure.

I inserted a {IMGSRC} placeholder where the dynamic value of cImgHome should go.

StrTran Replacement:
After the TEXT INTO block, I use StrTran() to replace {IMGSRC} with the content of cImgHome, which contains the Base64 string of the image.

Advantages:
This approach keeps the code readable thanks to TEXT INTO for the static part.

It allows you to insert the value of cImgHome dynamically without having to manually concatenate each line.

Re: webview2 and images

Posted: Wed Mar 26, 2025 10:58 am
by cmsoft
Yo creo que es porque si usas TEXT INTO lo toma todo como un texto, no toma las variables.
Creo que si lo haces como lo habias hecho al principio reemplazando el texto por la imagen estaría bien:

Code: Select all | Expand

Function html()
    LOCAL cHtml
    cImgHome := "data:image/png;base64," + hb_base64encode( hb_memoRead( 'c:\work\fwh\bitmaps\pngs\2.png' ) )

    TEXT INTO cHtml
     <!DOCTYPE html>
     <html lang="it">
     <span class="section-title">
         <img src="cImgHome" alt="Home"> home</span>
         </body>
         </html>
            ENDTEXT
   cHtml := REPLACE(cHml, "cImgHome",cImgHome) //Reemplazar el literal por el contenido de la variable            
    return cHtml
Editado: Esta respuesta es lo mismo que te dio la IA, no lo habia visto a ese mensaje

Re: webview2 and images

Posted: Wed Mar 26, 2025 11:48 am
by Silvio.Falconi
Now seem run ok

I opted for another direction, that is, inserting all the images into a Hash. It seems faster.
The problem is that I don't know if I can insert the resource.

Code: Select all | Expand

  hImages["IMGHOME"] := "data:image/png;base64," + hb_base64encode( hb_memoRead( cImagesPath + "home.png" ) )

Re: webview2 and images

Posted: Thu Mar 27, 2025 5:56 pm
by vilian
Hi Guys,

Why we can't show images directly from jpg files as we do with html?
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited