Dash data frame with html.Img or loading an image from local directory

Dash Python
5

Hey @jinnyzor, I tried something like this:

from dash import Dash, html
import os
import PIL.Image as Image
import pandas as pd
import dash_ag_grid as dag

image_directory = './images'
image_files = [f'fig_{i}.png' for i in range(3)]

data = []
for image_file in image_files:
    img = Image.open(os.path.join(image_directory, image_file))
    data.append({'Image': img, 'Filename': image_file})
df = pd.DataFrame(data)


columnDefs = [
    {
        "headerName": "Thumbnail",
        "field": "Image",
        "cellRenderer": "ImgThumbnail",
        "width": 100,
    },
    {
        "headerName": "Image Name",
        "field": "Filename",
    },
]

grid = dag.AgGrid(
    id="custom-component-img-grid",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    dashGridOptions={"rowHeight": 100},
    style={"height": 475},
    columnSize="sizeToFit",
)

app = Dash(__name__)
app.layout = html.Div(grid)

if __name__ == "__main__":
    app.run(debug=True)

which results into:
grafik

EDIT: It works now. I had to add the following to assets/*.js:

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.ImgThumbnail = function (props) {
    const {setData, data} = props;

    function onClick() {
        setData(props.value);
    }

    return React.createElement(
        'div',
        {
            style: {
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
            },
        },
        React.createElement(
            'img',
            {
                onClick: onClick,
                style: {width: '100%', height: 'auto'},
                src: props.value,

            },
        )
    );
};

Thanks to @jinnyzor :hugs: