\
**Category:** Dash Python\
**Created:** [June 19, 2023, 4:13pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209 "2023-06-19T16:13:50Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@stef007](https://community.plotly.com/u/stef007)\
**Post date:** [June 19, 2023, 4:13pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209/1 "2023-06-19T16:13:50Z")
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.
---
**Author:**  [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [June 19, 2023, 6:17pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209/2 "2023-06-19T18:17:32Z")
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.
> [@stef007](#):
>
> . 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://)
You can show an local image using PIL:
>
EDIT: As general not concerning tabular data: I would suggest taking a look at ag-grid.
---
**Author:**  [@stef007](https://community.plotly.com/u/stef007)\
**Post date:** [June 19, 2023, 7:53pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209/3 "2023-06-19T19:53:33Z")
I looked at Ag-Grid Example #7 ([https://dashaggrid.pythonanywhere.com/components/cell-renderer](https://ag-grid/)). 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:
```auto
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",
)
```
---
**Author:**  [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [June 19, 2023, 8:46pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209/4 "2023-06-19T20:46:24Z")
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)`
---
**Author:**  [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [June 19, 2023, 8:57pm UTC](https://community.plotly.com/t/dash-data-frame-with-html-img-or-loading-an-image-from-local-directory/76209/5 "2023-06-19T20:57:13Z")
Hey @jinnyzor, I tried something like this:
```python
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:
EDIT: It works now. I had to add the following to assets/\*.js:
```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 🤗