webview2 and images

Silvio.Falconi · Post by **Silvio.Falconi** » Mon Mar 24, 2025 11:00 pm

I tried to show an image on html with Twebview2

 <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 ?

Post by **Lailton** » 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 ) )

Silvio.Falconi · Post by **Silvio.Falconi** » Tue Mar 25, 2025 10:02 am

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 )

Post by **Lailton** » Tue Mar 25, 2025 4:07 pm

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 )

Silvio.Falconi · Post by **Silvio.Falconi** » Tue Mar 25, 2025 8:41 pm

There Is not. Any www
The HTML Is on Memory
The HTML not exist It Is load on Memory

Post by **cnavarro** » Tue Mar 25, 2025 10:38 pm

Silvio, full path of image file

Post by **cmsoft** » 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

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

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 8:12 am

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

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

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 8:47 am

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 ?

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 8:56 am

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>

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 10:30 am

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

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

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 10:45 am

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

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.

Post by **cmsoft** » Wed Mar 26, 2025 10:58 am

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

Silvio.Falconi · Post by **Silvio.Falconi** » Wed Mar 26, 2025 11:48 am

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" ) )

vilian · Post by **vilian** » Thu Mar 27, 2025 5:56 pm

Hi Guys,

Why we can't show images directly from jpg files as we do with html?

FiveTech Software tech support forums

webview2 and images

webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images

Re: webview2 and images