Lottie files from assets_dir are not displayed on Windows

[blackCmd]

Can't play animation with Lottie and Rive local file.

I tried to download a .json file from Lottie and load it using ft.Lottie(), but it did not load.
The same thing happened with the .lottie file.

The Lottie animation only works properly with link not local file.
My lottie json file link is here -> https://lottie.host/f38acda7-c5f1-4d79-8fe8-9e97db1b0518/sIOtOddtgl.json

ENV.

Windows11.
flet 0.24.

---

2024.11.26
Works local Lottie.json file on Ubuntu.
not Work local Lottie.json file on Windows.
This bug has not been fixed for a long time.

[yunguangli]

Same problem with local Rive file.

[ndonkoHenri]

Please share the code you are using and the organization of your files.

[blackCmd]

Please share the code you are using and the organization of your files.

@ndonkoHenri My simple sample code is here.

My local Lottie file is here : https://lottie.host/f38acda7-c5f1-4d79-8fe8-9e97db1b0518/sIOtOddtgl.json

Code is here :

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Lottie(
            #src='https://lottie.host/f38acda7-c5f1-4d79-8fe8-9e97db1b0518/sIOtOddtgl.json',  # <- work
            src='./my_file.json',  # <- not work

            repeat=False,
            reverse=False,
            animate=True
        )
    )

ft.app(target=main)

[ndonkoHenri]

I tried it and it worked both on desktop and web mode:

The issue should be in the organisation of your files: https://flet.dev/docs/controls/image#src
Make sure your json file is located in the assets_dir (which is "assets" by default)

I am unsure of this, but another possibility might be that the control is too large. Try giving the Lottie control a size(width/height) or set .expand=True.

Let me know which one works.

[blackCmd]

@ndonkoHenri
Thank you so much for testing☺️.
Inspired by your words, I specified the asset_dir and tried using a local json lottie file, but it failed again.
I am using Windows 11 and flet 0.22

My code is as follows, and I will try it on Ubuntu and come back.

Thank you.

import flet as ft

def main(page: ft.Page):

    lottie = ft.Lottie(
            # src='https://lottie.host/a004f840-d5a5-45e1-8542-9242bea9f6c2/pIOXGjAZef.json',  # <- work
            src=f'/ai.json',  # <- not work
            repeat=True,
            reverse=False,
            animate=True,
            expand=1
        )
    page.add(
        lottie
    )

    page.update()

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

---

I've tried it now on Ubuntu 22.04. But not work... ㅠ_ㅠ...

[auphof]

I have it working in WSL ubuntu 22.04 as per flet-dev/flet#3083 where my issue is with APK on android
If it helps ? In WSL i have the following with the working variations ....

# --------------------------------------------------------
# Assets folder tree view
# --------------------------------------------
# assets

# ├── B.json
# ├── icon.png
# └── images
#     ├── B.json
#     └── photo.png


# presume assets and assets/images already exist with `assets/icon.png` and `assets/images/photo.png`
# wget https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/B.json" -O assets/B.json
# cp ./assets/B.json ./assets/B.json
# cp ./assets/B.json ./assets/images/B.json

# Following work in ✅ WSL  but Fail with ❌ APK 
# see full code at https://gist.github.com/auphof/32f4f22328374d4e13ebc5a28206fb13
lottie_card_b2 = create_lottie_card("B2", src="B.json")
lottie_card_b5 = create_lottie_card("B5", src="/B.json")
lottie_card_b6 = create_lottie_card("B6", src="/images/B.json")

One slight difference and I tested both versions . my call is ft.app(target=main, assets_dir="assets") and your call is with "./assets" I then changed to an an incorrect dir and it still works 🧐, the default attribute value is assets, would need to look at the underlying implementation to see what is happening there ?

If I changed the assets dir in flet run -a assets it works ✅ as expected and expect flet run -a assetsxxxxxx to FAIL which it did ✅

do check your file permissions ls -laR ./assets

[auphof]

also check the downloaded lottie json is valid, I use the following playground to drop in JSON
https://lottiefiles.github.io/lottie-docs/playground/json_editor/

[ndonkoHenri]

@blackCmd try the different combinations suggested by @auphof - hopefully one of them will catch. (remove .\ from assets_dir too and retry)

If this doesn't work, then share with us how your files organized: main python script, assets folder?

[blackCmd]

@auphof
I tried ./assets and assets but not working all..
And I check my local Lottie file on https://lottiefiles.github.io/lottie-docs/playground/json_editor.
It works. ▼

Here is my all code and Lottie local file... -> TryLottiePlz.zip

It has only one python scrpit and one asset file.
I'm sorry to bother you, but could you please test it?
If it works well... could it be a compatibility issue with Windows 10 and 11?

[auphof]

@blackCmd That worked on my WSL2 Ubuntu22.04 see

[auphof]

@blackCmd you could try and debug step into ft.app and set a breakpoint in app.py at 1st line of __get_assets_dir_path and another at the return and observe and in debug console do a few check. This is my example using VSCODE

[auphof]

👏👏 @blackCmd well done, great find! ,
I would not close the issue but retitle to issue with encodings such as EUC-KR maybe explain a bit more so we can all learn. Maybe a code segment to show.

Would a solution be to raise exception if encoding is incorrect ?

[blackCmd]

👏👏 @blackCmd well done, great find! , I would not close the issue but retitle to issue with encodings such as EUC-KR maybe explain a bit more so we can all learn. Maybe a code segment to show.

Would a solution be to raise exception if encoding is incorrect ?

@auphof
As I mentioned, other asset files, excluding Lottie files, ran without issues even in Korean path names. Therefore, it doesn't seem appropriate to indiscriminately cause an exception for EUC-KR.

There might be various solutions, but if an exception occurred when a Lottie local file failed to load, as in my case, it would be easy for anyone to resolve the issue.

[blackCmd]

@auphof
(I retitle subject name ☺️)

[ndonkoHenri]

Happy to know you can now move on.

Concerning the issue with the korean path, it is possible that the Lottie package used by Flet has an issue with this. (I however found no related issue on their repo)
I could test this by building a Flutter application - @blackCmd could you give me an example file name for my testing?

[blackCmd]

@blackCmd could you give me an example file name for my testing?

@ndonkoHenri
Here is my all code and Lottie local file... -> TryLottiePlz.zip

Really simple▼

[manjeetparjapati]

Hi,
I downloaded the "TryLottiePlz.zip" from this chat. I tried the code but facing the same problem. Local ai.json file not showing but url working fine. there is no Korean path or other language, only English.
I have tried the other lottie json file, none working at local path, but same lottie.json works via url.

OS - Windows10 22H2
flet - version 0.22.0
python - Python 3.12.2

please help me out, thanks in advance.

[ndonkoHenri]

Can you try different path combinations as seen here?

[manjeetparjapati]

I have tried. I did not change anything. just create the assets folder as guided.

[yunguangli]

Same here on English version of windows 11. No special characters in path and folders. Local Lottie and vine in default
assets folder won't show . Local jpg and gif in the same directory work. URL works.

[manjeetparjapati]

Can you try different path combinations as seen here?

I have tried but no success. please help me out

[ndonkoHenri]

This might be a windows related issue.
Needs investigation...

[jaychia0418]

with open("assets/empty.json", "r", encoding="utf-8") as json_file:
json_data = json_file.read()
self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')

ft.Lottie(src_base64=self.json_base64),

[blackCmd]

with open("assets/empty.json", "r", encoding="utf-8") as json_file: json_data = json_file.read() self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')

ft.Lottie(src_base64=self.json_base64),

Oh.. is it works?!

[ShafiqSadat]

Same
Windows 11
Python 3.11

[blackCmd]

same
windows 11
latest flet 0.24

[luanmarcal]

with open("assets/empty.json", "r", encoding="utf-8") as json_file: json_data = json_file.read() self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')

ft.Lottie(src_base64=self.json_base64),

I had the same problem and this worked for me, I just made an adjustment for my Flet 0.26.0 project.

import flet as ft
from flet_lottie import Lottie
import base64

#...

with open("src/assets/todo_lottie.json", "r", encoding="utf-8") as json_file:
    json_data = json_file.read()
    self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')

Lottie(
   src_base64=self.json_base64,
   expand=True,
   height=300,
)

#...

[alex-sirod]

@luanmarcal,
Essa solução resolveu para mim!
This solutions worked well in my case!!

(note that, 'self' parameter was not used)

[blackCmd]

with open("assets/empty.json", "r", encoding="utf-8") as json_file: json_data = json_file.read() self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')
ft.Lottie(src_base64=self.json_base64),

I had the same problem and this worked for me, I just made an adjustment for my Flet 0.26.0 project.

import flet as ft
from flet_lottie import Lottie
import base64

#...

with open("src/assets/todo_lottie.json", "r", encoding="utf-8") as json_file:
json_data = json_file.read()
self.json_base64 = base64.b64encode(json_data.encode('utf-8')).decode('utf-8')

Lottie(
src_base64=self.json_base64,
expand=True,
height=300,
)

#...

@auphof @FeodorFitsner

Attention Flet developers...
A problem that Flet couldn’t solve for months has just been resolved in one go.