topic-45562

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

webview2 and images
Posted: 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 Collapse

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 ?

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Lailton

Posts: 231

Joined: Fri Jul 20, 2012 01:49 AM

Re: webview2 and images
Posted: Tue Mar 25, 2025 01: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 Collapse

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

Regards,

Lailton Fernando Mariano

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Tue Mar 25, 2025 10:02 AM

Lailton wrote: 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 Collapse
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 )

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Lailton

Posts: 231

Joined: Fri Jul 20, 2012 01:49 AM

Re: webview2 and images
Posted: Tue Mar 25, 2025 04: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 Collapse

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

Regards,

Lailton Fernando Mariano

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Tue Mar 25, 2025 08:41 PM

There Is not. Any www

The HTML Is on Memory

The HTML not exist It Is load on Memory

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

cnavarro

Posts: 6755

Joined: Wed Feb 15, 2012 08:25 PM

Re: webview2 and images
Posted: Tue Mar 25, 2025 10:38 PM

Silvio, full path of image file

Cristobal Navarro

Hay dos tipos de personas: las que te hacen perder el tiempo y las que te hacen perder la noción del tiempo

El secreto de la felicidad no está en hacer lo que te gusta, sino en que te guste lo que haces

cmsoft

Posts: 1344

Joined: Wed Nov 16, 2005 09:14 PM

Re: webview2 and images
Posted: 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 Collapse

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 Collapse

'..\bitmaps\pngs\2.png'

Use como ejemple el pinguino que esta en la carpeta bitmaps/pngs

Salu2
Cesar Gomez
https://www.bcnsoft.com.ar
https://www.pedidosbcn.com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Wed Mar 26, 2025 08:12 AM

cmsoft wrote: 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 Collapse
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 Collapse
'..\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

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Wed Mar 26, 2025 08:47 AM

if I made this

Code: Select all Collapse

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 Collapse

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 ?

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Wed Mar 26, 2025 08:56 AM

if I made

Code: Select all Collapse

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>

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Wed Mar 26, 2025 10:30 AM

I have the images on .\img

I make

Code: Select all Collapse

#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

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: Wed Mar 26, 2025 10:45 AM

QWEN (another AI) sad me this and RUN OK

Code: Select all Collapse

#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.

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

cmsoft

Posts: 1344

Joined: Wed Nov 16, 2005 09:14 PM

Re: webview2 and images
Posted: 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 Collapse

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

Salu2
Cesar Gomez
https://www.bcnsoft.com.ar
https://www.pedidosbcn.com

Silvio.Falconi

Posts: 7317

Joined: Thu Oct 18, 2012 07:17 PM

Re: webview2 and images
Posted: 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 Collapse

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

Since from 1991/1992 ( fw for clipper Rel. 14.4 - Momos)

I use : FiveWin for Harbour March-April 2024 - Harbour 3.2.0dev (harbour_bcc770_32_20240309) - Bcc7.70 - xMate ver. 1.15.3 - PellesC - mail: silvio[dot]falconi[at]gmail[dot]com

vilian

Posts: 1067

Joined: Wed Nov 09, 2005 02:17 AM

Re: webview2 and images
Posted: Thu Mar 27, 2025 05:56 PM

Hi Guys,

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

Sds,
Vilian F. Arraes
vilian@vfatec.com.br
Belém-Pa-Brazil

FiveTech Support Forums