Render PIL.Image in AG Grid

[ChristiaensBert]

I have a bunch of PIL.Image images that I want to render in the AG Grid. I saw examples of rendering URLs in the grid, but can't manage to serialize the PIL.Image correctly.

Do you have a solution for this?

subset_df_partition = subset_df.get_partition(0).head(5)

def load_image(image):
    return Image.open(io.BytesIO(image))

def serialize_pil_image(image):
    # serialize PIL image so it's compatible with the `data:image/png;base64,` format
    buff = io.BytesIO()
    image.save(buff, format="PNG")
    try:
        return buff.getvalue().decode("utf-8")
    except UnicodeDecodeError:
        return buff.getvalue().decode("utf-8", "ignore")

def image_renderer(params):
    print(params)
    image_data = params.value
    if image_data is None:
        return ""
    try:
        image_bytes = base64.b64decode(image_data)
    except (TypeError, binascii.Error):
        return ""
    return f'<img src="data:image/png;base64,{base64.b64encode(image_bytes).decode()}" width="100" height="100">'

subset_df_partition["images_data"] = subset_df_partition["images_data"].apply(load_image)
subset_df_partition["images_data"] = subset_df_partition["images_data"].apply(serialize_pil_image)
print(subset_df_partition)

options_builder = GridOptionsBuilder.from_dataframe(subset_df_partition)
options_builder.configure_column("images_data", cellRenderer=JsCode(image_renderer))

AgGrid(subset_df_partition, gridOptions=options_builder.build())