Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Table of images or thumbnails please ?? #800

Closed
Nabilcobain opened this issue Jul 3, 2020 · 1 comment · Fixed by #916
Closed

Table of images or thumbnails please ?? #800

Nabilcobain opened this issue Jul 3, 2020 · 1 comment · Fixed by #916

Comments

@Nabilcobain
Copy link

I don't know if this is what you are looking for but I managed to put the images in a table (bootstrap component) through a workaround.
Through the following function I transformed them into thumbnails and then wrote them in html components.

def get_thumbnail(path):   
   i = Image.open(path)
   i.thumbnail((100, 100), Image.LANCZOS)
   buff = BytesIO()
   i.save(buff, format="PNG")
   encoded_image = base64.b64encode(buff.getvalue()).decode('UTF-8')
   return (html.Img(src='data:image/png;base64,{}'.format(encoded_image)))

At this point I put them in a column of a pandas dataframe in the layout.

html.Div([
        dbc.Table.from_dataframe(pandas_df, striped=True, bordered=True, hover=True, responsive="sm")
        ],
        style = {'margin-right':'90px','margin-left':'90px'})

This is the result:
Cattura

P.S.

import dash_html_components as html
import dash_bootstrap_components as dbc`

Originally posted by @ricky1192 in #383 (comment)

@Bytecat01
Copy link

Hi,
I am new to dash (and html). But is there an alternative way to embed local images into the dash data_table instead of using dash_bootstrap_components? (I am running it locally). Unfortunately, my anaconda does not have access to this package. I can export my pandas dataframe as an HTML file, and the images appear via the tags in the cells perfectly.
What I tried was:

  • Straight import into a dash table. The path shows up instead of the image;
  • Tried using HTML.Table to create the table that way. Same result as the above.
  • I can embed images via app.layout = html.Div(html.Img(src=app.get_asset_url("file.png"))) (by adding the assets folder). However this is for one off images, rather than a data table.

Has there been any movement on this functionality?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants