Images no longer displaying in web mode

[kiebak3r]

Description
Images from assets are no longer being shown on the WebView when using 0.21.1 >

Code example to reproduce the issue:

import flet as ft

imgsrc='./assets/deaf918056f442f1be15fadf7553cd63.png'


def main(page):
  imgObj=ft.Image(src=imgsrc)
  img = ft.Container(content=ft.Row([imgObj,ft.Text('Image'),]), bgcolor="orange")
  page.add(img)

ft.app(main, assets_dir='assets') 

Describe the results you received:
When running the app with; app = ft.app(target=main, assets_dir='assets') then it gathers and displays the assets correctly but when running with app = ft.app(target=main, assets_dir='assets', view=ft.WEB_BROWSER) or app = ft.app(target=main, assets_dir='assets', export_asgi_app=True) then all images are not shown

This was not the case in <= 0.20

Describe the results you expected:
Images to be shown as expected

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

Name: flet
Version: 0.21.1
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page: 
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: C:\Users\kbaker\AppData\Local\Programs\Python\Python311\Lib\site-packages
Requires: cookiecutter, fastapi, flet-runtime, packaging, qrcode, uvicorn, watchdog
Required-by: 

Operating system:
Windows 11 23H2

Additional environment details:

[ndonkoHenri]

The path to your image has to be a relative path to the assets_dir. So, instead do: imgsrc='/zzz.png' or imgsrc='zzz.png'.
Also, please make sure that image really exist. For testing purposes you can make it's name less complex.

[justinodi23]

Please can you provide a solution of local images not loading on flet app but loads on the web even though I added the. / before the image url

[prasterphilipp]

Hello, I get the same problem. When I run the app with ft.app(main), it works. However, when I run the app with ft.app(target=main, view=ft.AppView.WEB_BROWSER), nothing is displayed.”

[kiebak3r]

@ndonkoHenri I have tried all path combinations and none are working for webview

With default view

With ft.WEB_VIEW

[ndonkoHenri]

As mentioned in my previous comment, remove "assets" from your src then retry.

[Klu1d]

A similar issue, except that I'm testing my application on a mobile device, not on the web. Fonts and images aren't displaying after I updated the application from the App Store

[FeodorFitsner]

Remove ./assets from image URL.

[ndonkoHenri]

@prasterphilipp, @Klu1d, please don't just mention having thesame error, but also attach some minimal reproducible code with the issue so we can save time and be of help.

[Klu1d]

@prasterphilipp, @Klu1d, please don't just mention having thesame error, but also attach some minimal reproducible code with the issue so we can save time and be of help.

You're right, sorry, I'll provide more detailed information in 20 minutes.

[burhansvural]

@kiebak3r

import flet as ft

imgsrc='aaa.jpg'


def main(page):
  imgObj=ft.Image(src=imgsrc,width=300,fit=ft.ImageFit.COVER,expand=1)
  img = ft.Container(
    content=ft.Row(
      expand=True,
      width=float("inf"),
      controls=[
        imgObj,
        ft.Text('Image',width=100,expand=1)
        ],
      spacing=10
    ),
    bgcolor="orange"

    )
  page.add(img)

ft.app(main, view=ft.AppView.WEB_BROWSER, assets_dir='assets') 

[prasterphilipp]

Here is a Screenshot, like I said it works when u run it normal with ft.app(main) but with ft.app(main, view=ft.WEB_BROWSER) nothing is displayed.

[Klu1d]

I'm testing through the official Flet app in the App Store, and this issue started after updating to 0.21.1

Code:

import flet as ft

def main(page: ft.Page):
    page.fonts = {
        "PTSerif": "./assets/font/PTSerif-Bold.ttf"
    }

    column = ft.Column(
        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            ft.Image("./assets/images/cat.jpg", width=200, height=200),
            ft.Text("This text with the property font_family=PTSerif", font_family='PTSerif'),
            ft.Text("This text without the font_family property",)
        ]
    )
    page.add(column)

ft.app(target=main, assets_dir='assets')

When i use flet run main.py:

When i use flet run main.py --ios:

[Klu1d]

Remove ./assets from image URL.

If I remove './assets', then I get the second option of events from my response

[burhansvural]

@Klu1d

Have you examined the codes I wrote above?

[rebeatle]

I had the same problem : This is my version

 Name: flet
Version: 0.21.2
Summary: Flet for Python - easily build interactive multi-platform apps in Pytho
n
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0

Here is a test code:

import flet as ft

    def main(page: ft.Page):
       page.title = "Images Example"        
       img = ft.Image(
            src="123.png",
            width=300,
            height=300,
            fit=ft.ImageFit.CONTAIN,
        )
    
    
        page.add(img)
    
        page.update()
    
    ft.app(target=main,assets_dir="images")

current dir :

-main.py
-images/123.png

At the time of writing this post I realized some details. When I run "python main.py" the app opens normally and the image is visible ( web browser, android and app ), but when I open it from "fleet run main.py", no image is displayed. According to chatgpt it has to do with the environment and how flet or python execute the files. I have no idea what that means. Has anyone done a deploy to find out if this error persists on servers?

[rlhk]

I have similar issue since 0.20.x.
My env: macOS Sonoma 14.3.1 MacBook Air M2, Python 3.11.7

Below is a simple custom control example that could illustrate the issue.
No local images used, so pretty sure not related to asset dir.

Save the code as big_avatar.py.
flet run -d big_avatar.py -> All good!
felt run -w big_avatar.py -> On my machine, the last 3 images are NOT displaying on all browsers that I have: Safari, Chrome, MS Edge Canary.

Web view has issue handling diff image size, format maybe?

import flet as ft

class BigAvatar(ft.UserControl):
  # assume circular, size determined by radius
  # padding is content within border
  # margin is space outside border
  def __init__(
      self, 
      src, 
      radius, 
      margin=0, 
      padding=0, 
      border=0,
      border_color=None, 
      bgcolor=ft.colors.SECONDARY_CONTAINER,
    ):
    super().__init__()
    self.src = src
    self.radius = radius
    self.margin = margin
    self.padding = padding
    self.border = border
    self.border_color = border_color
    self.bgcolor = bgcolor
  
  def build(self):
    return ft.Container(
      content= ft.Image(
          src=self.src,
          width=self.radius*2,
          height=self.radius*2,
          fit=ft.ImageFit.COVER,
          repeat=ft.ImageRepeat.NO_REPEAT,
          border_radius=ft.border_radius.all(self.radius),
      ),
      # | margin | padding | content | padding | margin |
      margin=ft.margin.all(self.margin),
      padding=ft.padding.all(self.padding),
      border=ft.border.all(self.border, self.border_color),
      bgcolor=self.bgcolor,
      border_radius=ft.border_radius.all(self.radius + self.border + self.margin),
      width=(self.radius + self.border + self.margin) * 2,
      height=(self.radius + self.border + self.margin) * 2
    )

# for testing purposes
def main(page: ft.Page):
  # page.debug = True
  # page.title = 'Title Placeholder'
  page.padding = 0
  page.window_width = 1920
  page.window_height = 1080
  page.window_min_width = 1920
  page.window_min_height = 1080
  page.window_max_width = 1920
  page.window_max_height = 1080
  page.window_title_bar_buttons_hidden = True
  page.window_title_bar_hidden = True
  page.bgcolor = ft.colors.BLACK
  
  page.scroll = ft.ScrollMode.AUTO
  # no border, just radius
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=50,
    border=0,
    border_color=ft.colors.BLUE,
    margin=0,
    padding=0,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))

  # with border
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=50,
    border=10,
    border_color=ft.colors.WHITE,
    margin=0,
    padding=0,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))

  # with border, margin and padding
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=100,
    border=50,
    border_color=ft.colors.GREEN,
    margin=50,
    padding=50,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))
  
  people = [
    {
      'radius': 20,
      'src': 'https://gamequitters.com/wp-content/uploads/Neil-Robertson-snooker-684x1024.jpg',
    },
    {
      'radius': 20,
      'src': 'https://www.snooker.org/img/players/jtrump.jpg',
    },
    { 
      'radius': 60,
      'src': 'https://www.snooker.org/img/players/Dingjunhui.jpg',
    },
    { 
      'radius': 80,
      'src': 'https://e3.365dm.com/23/10/1600x900/skynews-ding-junhui-snooker_6307552.jpg',
    }
  ]
  for p in people:
    page.add(BigAvatar(
      src=p['src'],
      radius=p['radius'],
      border=5,
      border_color=ft.colors.WHITE,
      bgcolor=ft.colors.SECONDARY_CONTAINER
    ))

if __name__ == '__main__':
  ft.app(
    target=main,
    assets_dir="assets",
    view=ft.AppView.WEB_BROWSER,
    port=5555,
  )

[ranonbezerra]

I have similar issue since 0.20.x. My env: macOS Sonoma 14.3.1 MacBook Air M2, Python 3.11.7

Below is a simple custom control example that could illustrate the issue. No local images used, so pretty sure not related to asset dir.

Save the code as big_avatar.py. flet run -d big_avatar.py -> All good! felt run -w big_avatar.py -> On my machine, the last 3 images are NOT displaying on all browsers that I have: Safari, Chrome, MS Edge Canary.

Web view has issue handling diff image size, format maybe?

import flet as ft

class BigAvatar(ft.UserControl):
  # assume circular, size determined by radius
  # padding is content within border
  # margin is space outside border
  def __init__(
      self, 
      src, 
      radius, 
      margin=0, 
      padding=0, 
      border=0,
      border_color=None, 
      bgcolor=ft.colors.SECONDARY_CONTAINER,
    ):
    super().__init__()
    self.src = src
    self.radius = radius
    self.margin = margin
    self.padding = padding
    self.border = border
    self.border_color = border_color
    self.bgcolor = bgcolor
  
  def build(self):
    return ft.Container(
      content= ft.Image(
          src=self.src,
          width=self.radius*2,
          height=self.radius*2,
          fit=ft.ImageFit.COVER,
          repeat=ft.ImageRepeat.NO_REPEAT,
          border_radius=ft.border_radius.all(self.radius),
      ),
      # | margin | padding | content | padding | margin |
      margin=ft.margin.all(self.margin),
      padding=ft.padding.all(self.padding),
      border=ft.border.all(self.border, self.border_color),
      bgcolor=self.bgcolor,
      border_radius=ft.border_radius.all(self.radius + self.border + self.margin),
      width=(self.radius + self.border + self.margin) * 2,
      height=(self.radius + self.border + self.margin) * 2
    )

# for testing purposes
def main(page: ft.Page):
  # page.debug = True
  # page.title = 'Title Placeholder'
  page.padding = 0
  page.window_width = 1920
  page.window_height = 1080
  page.window_min_width = 1920
  page.window_min_height = 1080
  page.window_max_width = 1920
  page.window_max_height = 1080
  page.window_title_bar_buttons_hidden = True
  page.window_title_bar_hidden = True
  page.bgcolor = ft.colors.BLACK
  
  page.scroll = ft.ScrollMode.AUTO
  # no border, just radius
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=50,
    border=0,
    border_color=ft.colors.BLUE,
    margin=0,
    padding=0,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))

  # with border
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=50,
    border=10,
    border_color=ft.colors.WHITE,
    margin=0,
    padding=0,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))

  # with border, margin and padding
  page.add(BigAvatar(
    src=f"https://picsum.photos/300",
    radius=100,
    border=50,
    border_color=ft.colors.GREEN,
    margin=50,
    padding=50,
    bgcolor=ft.colors.SECONDARY_CONTAINER
  ))
  
  people = [
    {
      'radius': 20,
      'src': 'https://gamequitters.com/wp-content/uploads/Neil-Robertson-snooker-684x1024.jpg',
    },
    {
      'radius': 20,
      'src': 'https://www.snooker.org/img/players/jtrump.jpg',
    },
    { 
      'radius': 60,
      'src': 'https://www.snooker.org/img/players/Dingjunhui.jpg',
    },
    { 
      'radius': 80,
      'src': 'https://e3.365dm.com/23/10/1600x900/skynews-ding-junhui-snooker_6307552.jpg',
    }
  ]
  for p in people:
    page.add(BigAvatar(
      src=p['src'],
      radius=p['radius'],
      border=5,
      border_color=ft.colors.WHITE,
      bgcolor=ft.colors.SECONDARY_CONTAINER
    ))

if __name__ == '__main__':
  ft.app(
    target=main,
    assets_dir="assets",
    view=ft.AppView.WEB_BROWSER,
    port=5555,
  )

I'm having the same issue with basically the same environment, just Flet 0.22 and Python 3.11.8. I've tried putting the full path and removing the reference to the assets dir on ft.app(), directly inside my assets dir and in a folder inside the assets dir.

[ranonbezerra]

Just found out the problem on my case. I was putting the image inside of a container, which had its width and height was based on the pages width and height (a percentage of page.window_width and page.window_height). Changing that to a number worked for some reason.

[rlhk]

Dug a bit further, found that some web images actually work for my cases (not size related as @ranonbezerra mentioned). I looked up the browser network console. For those not working, they are associated with "CORS error". Flet browser mode should be just fine. Servers with looser CORS rule work.

[justinodi23]

Please can you provide a solution of the local images not loading on flet app but loads on web

[alexblacknet20]

Dear friends,

I have tested the asset_dir and raw strings functionality on mobile devices, as well as the local host with local address working in the desktop app (Windows and Linux). I have also tested a single folder with main.py, which is only functional on the web.

Please let me know if you have more information about this.

Best regards,
Alex

[AlexVertek]

Hello all! I solved the problem using:
ft.Image(src=f"/Cientik_logo_branca_200px.png", height=60)
The images are at the "assets" folder.
Now they are showing at Browser.