嵌入式ui——lvgl显示图片

 在使用lvgl显示图片有两种方式，一种是使用文件系统显示，这种显示方式灵活，而且对cpu的占用资源也少。第二种是使用c数组的形式访问，这种占用资源比较大因此，图片不可以太大。尽量小，要不然堆栈会溢出。

 一、使用c数组显示图片

1.1在lvgl官网中导入图片转换成.c文件    

https://lvgl.io/tools/imageconverter //官网网址

1.2生成c文件

1.3将c文件导入工程中

1.4添加声明代码

LV_IMG_DECLARE(your_img);//此处输入c文件名字

1.5显示图片

 lv_obj_t *img = lv_img_create(obj);  // 在 obj 上创建图像对象
 lv_img_set_src(img, &your_img);  // 设置图像源
 lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);  // 图像居中显示

二、直接使用文件系统显示图片

2.1 挂载文件系统

这里使用的是posix，在lv_conf文件中找到

 LV_USE_FS_POSIX 0改为 LV_USE_FS_POSIX 1

LV_FS_POSIX_LETTER ’ ‘改为LV_FS_POSIX_LETTER ’P‘

后面两个分别为路径和缓冲区，可以不用设置。

2.2 启用解码器

这里启用了PNG解码器，在lv_conf中可以找到

启动解码器之后，记得在lvgl初始化的时候，同样对解码器进行初始化

lv_png_init();

2.3 显示图片

lv_obj_t *img = lv_img_create(left_obj);
lv_img_set_src(img, "P:/your/img"); // 替换为你的图片路径
lv_obj_align(img, LV_ALIGN_CENTER, 0, 0); // 图片居中对齐

文件路径开头，要以之前挂载文件系统时输的字母相同。

LV_FS_POSIX_LETTER ’P‘

所以，在这里我的路径为 P:/your/img

三、FAQ

 图片部分显示”No data“

1，若是使用的是c数组方法，可以考虑是内存不足导致无法显示，解决方法可以是选择小一点图片进行再次测试，或者在lv_conf文件中修改size大小

#define LV_MEM_SIZE (48U * 1024U)          /*[bytes]*/

2，若是使用的是文件直接访问，有可能是图片颜色位数不对导致，在解码器代码中，我们可以看到，在bmp解码器中，颜色深度需要为32位。可以使用不同解码器进行测试。

 

若是读者发现文章有什么问题，欢迎给博主留言指正！

end