Display PNG images using lv_img_set_src and SPIFFS


Display PNG images shows ‘No data’ when image size is bigger than 50x50 pixels

What MCU/Processor/Board and compiler are you using?

ESP32 (WT32-SC01 board)

What LVGL version are you using?

8.3.9 (also tried 8.3.1, same results)

What do you want to achieve?

Display PNG images bigger than 50x50 pixels

What have you tried so far?

Changed PNG image size until found that limit is 50x50, bigger images are not displayed and only shows ‘No data’ in the screen. In the screenshot, both files are placed in SPIFFS and the both are valid PNG images. Looks like is something related to the image size.

Code to reproduce

lv_obj_t *mainIcon;
mainIcon = lv_img_create(mainInfo);
lv_obj_set_pos(mainIcon, 70, 100);
lv_img_set_src(mainIcon, "A:spiffs/10d.png"); // this image is displayed

mainIcon = lv_img_create(mainInfo);
lv_obj_set_pos(mainIcon, 200, 100);
lv_img_set_src(mainIcon, "A:spiffs/png_demo.png"); // this image shows 'No data'

Screenshot and/or video

Any clue? No one knows how to fix this? :pleading_face:

Sadly I have no clue, however have you tried declaring a different lv_obj_t* and calling lv_img_create on that instead? I know you probably have but that is the only possible issueI can spot in the code you posted.

Also, have you converted the big images beforehand? From the docs:
To use external files, you also need to convert the image files using the online converter tool but now you should select the binary output format. You also need to use LVGL's file system module and register a driver with some functions for the basic file operation. Go to the [File system](https://docs.lvgl.io/8.3/overview/file-system.html) to learn more. To set an image sourced from a file, uselv_img_set_src(img, “S:folder1/my_img.bin”).

Otherwise I do not know, documentation does not mention anything about big images.


I’m currently using a workaround, I have converted the images to .h files with the array on values for each pixel. It works fine.
I will try using the bin format, as you proposed, but it’s kind of weird the limit of 50x50px size, don’t you think?

Thanks for your answer!

it seems you didn’t have enough memory to unpack such picture

I believe there isn’t a memory problem, but I wil check it anyway…

Ofcourse this is RAM memory problem and your lv_conf. If you dont use mem custom 1 , you stay limited to memory size writed in conf…

You were right, setting LV_MEM_CUSTOM 1 solved the problem. Anyway, it’s weird because I changed the LV_MEM_SIZE to a size bigger than the images and didn’t work. The memory management when LV_MEM_CUSTOM is set to 1 made it worl.


Right! My apologies, it’s workig now!

You need at least such memory:

  1. file size bytes - to store file content
  2. w * h * 4 bytes - to store unpacked image
    I don’t remember exactly, but it seems like some amount of memory is used during unpacking.