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

Dash Python
1

have been attempting to load an image, or better yet, a thumbnail, using html.Img() but without success. Displaying the standalone image works perfectly fine. I used this path because I couldn’t load an image from a local directory, unlike all the provided examples where the image is sourced from the web(http://). I would greatly appreciate an example for any of the aforementioned scenarios.

1
11010×298 26.9 KB

2

Hi @stef007 you are tying to put an Imageinto a DataTable which is not possible.

The DataTable accept only the trhree types listed in the error message.

You can show an local image using PIL:

EDIT: As general not concerning tabular data: I would suggest taking a look at ag-grid.

3

I looked at Ag-Grid Example #7 (https://dashaggrid.pythonanywhere.com/components/cell-renderer). When using this example, I encountered an issue with rendering local image files as mentioned above.

Here is a snippet of what I was trying to do:

data = []
for image_file in image_files:
    image_path = os.path.join(image_directory, image_file)
    encoded_image = encode_image(image_path)
    data.append({'Image': html.Img(src='data:image/png;base64,{}'.format(encoded_image)), '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",
)
4

Hello @stef007,

Assuming you are using the component from the example, all you need to do is pass the src of the image. The cellRenderer will do all the other things for you.

eg
'Image': 'data:image/png;base64,{}'.format(encoded_image)

1 Like
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: