Markdown Does not show image!

[applicatlat]

Description

Code example to reproduce the issue:

import flet as ft

md1 = """
# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.

## Titles

Setext-style

This is an H1
=============

This is an H2
-------------

Atx-style

# This is an H1

## This is an H2

###### This is an H6

Select the valid headers:

- [x] `# hello`
- [ ] `#hello`

## Links

[inline-style](https://www.google.com)

## Images

![Image from Flet assets](/icons/icon-192.png)

![Test image](https://picsum.photos/200/300)

## Tables

|Syntax                                 |Result                               |
|---------------------------------------|-------------------------------------|
|`*italic 1*`                           |*italic 1*                           |
|`_italic 2_`                           | _italic 2_                          |
|`**bold 1**`                           |**bold 1**                           |
|`__bold 2__`                           |__bold 2__                           |
|`This is a ~~strikethrough~~`          |This is a ~~strikethrough~~          |
|`***italic bold 1***`                  |***italic bold 1***                  |
|`___italic bold 2___`                  |___italic bold 2___                  |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|

## Styling

Style text as _italic_, __bold__, ~~strikethrough~~, or `inline code`.

- Use bulleted lists
- To better clarify
- Your points

## Code blocks

Formatted Dart code looks really pretty too:

void main() {
runApp(MaterialApp(
home: Scaffold(
body: ft.Markdown(data: markdownData),
),
));
}

"""

def main(page: ft.Page):
    page.scroll = "auto"
    page.add(
        ft.Markdown(
            md1,
            selectable=True,
            extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
            on_tap_link=lambda e: page.launch_url(e.data),
        )
    )

ft.app(target=main)

Describe the results you received:

Describe the results you expected:

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

Flet version (pip show flet):

0.14.0

Operating system:

Additional environment details:

[FeodorFitsner]

Upgrade Flet to the latest and check again.

[applicatlat]

Upgrade Flet to the latest and check again.

Hello Feodor. I am receiveing some system related error during upgrading the flet. I will answer you ASAP whenever I deal with it. Thanks for your time

[applicatlat]

Upgrade Flet to the latest and check again.

Hello Feodor. I upgraded the Flet now it is 0.18.0 however the result is unfortunately the same. @FeodorFitsner

[cheak1974]

Can you access the image directly via http://127.0.0.1:8080/icons/icon-192.png ?

If not then you're configuration regarding the assets folder isn't working properly.

regards
Chris

[applicatlat]

Dear @cheak1974 I dont know the determination process between the configuration of the assets folder because I tried the image feature of Markdown with a different code and the address of the image file was on my desktop. The other thing is I can not see the image with that link. What should I do to configure it properly?

[cheak1974]

Hi @applicatlat,

you need a basic folder structure in the bare minimum it could be something like:

/opt/myapp
           /assets
               /fonts
               /icons
               /img
                   example.jpg
               root_image.jpg
           /venv
           main.py
           requirements.txt

In your ´main.py´ there lives your app and the command which starts up the flet app.
This is done by instanciating the app class of flet:

import flet as ft

def main(page):
   # YOUR APP CODE

ft.app(target=main, port=8080, view=ft.WEB_BROWSER, assets=/myRelativeAssetFolder)

The asset argument ist optional if your asset folder is called "assets".

You can access the content of the asset folder with the name of the ressource directly attached to the URL of your app. Sub folders can also be accessed.

http://127.0.0.1:8080/root_image.jpg
http://127.0.0.1:8080/img/example.jpg

regards
Chris

[FeodorFitsner]

Upgrade to latest Flet please and try again.

Also, try configuring page.on_error = lambda e: print("Page error:", e.data) handler to see the error.

[applicatlat]

Dear @FeodorFitsner and @cheak1974 I received this error: "Page error: Unsupported operation: Cannot extract a file path from a c URI. " When I moved the photo assets folder and worked it with view = ft.WEB_BROWSER in browser I was able to view the image but not as standalone.

[mochimochiki]

I ran into the same problem.
@FeodorFitsner It seems to be a issue occurring when using the Markdown control with Windows OS.

/.venv
/assets
    /test.png
/main.py

When executing main.py on this directory,

import flet as ft

def main(page: ft.Page):
    img = ft.Image(src="/test.png")
    md = ft.Markdown("![assets image](/test.png)")
    page.add(img, md)
    page.on_error = lambda e: print("Page error:", e.data)
    page.update()

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

• Image control displays an image
• Markdown control does not display image

The following error message appears.

Page error: Unsupported operation: Cannot extract a file path from a c URI

flet version:

c:\flet_test>flet --version
0.20.2

Issues that may be related
dart-lang/sdk#42874