How to Display an Image from Mqtt Base64


The image not rendered properly to “ui_Image2”.

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

-ESP32-S3 (WT32-S3-Wrover)
-Arduino IDE

What LVGL version are you using?


What do you want to achieve?

Display base64 decoded message on screen

What have you tried so far?

The code block(s) should be formatted like:
//This code receive an Mqtt base64 message and decoded the message before displaying it to “ui_Image2” generated using Squareline Studio.

void messageArrived(char* topic, byte* payload, unsigned int length) {
String message = “”;
for (int i = 0; i < length; i++) {
message += (char)payload[i];
Serial.println("Received message: " + message);

// Decode the base64 message
size_t decodedSize;
uint8_t* decodedData = base64_decode((const unsigned char*)message.c_str(), message.length(), &decodedSize);

const lv_img_dsc_t* TemporaryImage = new lv_img_dsc_t({
0, // header.alwayszero
2, // Unknown
320, // Width
240, // height
decodedSize, // data size
decodedData // data

lv_img_set_src(ui_Image2, TemporaryImage);

Screenshot and/or video

Screenshot 2023-02-14 115830