Loading an image( stored in Folder) in a dashtable in webapps

amgum

Hi,

Im trying to read a an image which is stored in one of the folder and i have to load it in my dash table. I'm able to display the image normally in the webapp but when i try to display it in the dash table it gives me a broken image.

Can someone please help me with this. Thank you

Here is how im calling the image.

#Reading imagefrom local folder (Im a non admin)

def get_image():

client=dataiku.api_client()

project=client.get_default_project()

images= dataiku.Folder('folder name')

image_data=images.get_download_stream('r.png').read()

data=base64.b64encode(image_data)

return json.dumps({'status':'ok','data':data.decode('utf-8')})

img1="<img src={image} />"

#Craeting a df with the images

names=pd.DataFrame(dict(['name',['name1','name2']), ('img',[img1,img1])]))

#App layout

app.layout=html.Div(children=[dash_table.DataTable(data=names.to_dict('records'),

columns=[{'id':'img','name':'img','presentation':'markdown'},

{'id':'name','name':'name'}], markdown_options={'html':True},

)

])

Zach

That's strange, it seems to be an issue with the image you're using. I copied the base64 in your result, and it's not working for me either even though other images work. I guess Dash doesn't like your image for some reason.

I was able to get it to work with your image by using html.Table to manually create an HTML-formatted table:

import base64

import dataiku
import pandas as pd
from dash import html


# Reading imagefrom local folder (Im a non admin)
def get_image():
    client = dataiku.api_client()
    project = client.get_default_project()
    images = dataiku.Folder("folder name")
    with images.get_download_stream("r.png") as file:
        image_data = file.read()
    data = base64.b64encode(image_data).decode("ascii")
    return f"data:image/png;base64,{data}"


img1 = get_image()

# Craeting a df with the images
names = pd.DataFrame({"name": ["name1", "name2"], "img": [img1, img1]})

# Create the header and rows for the html.Table
header = html.Tr([html.Th("img"), html.Th("name")])
rows = [
    html.Tr([
        html.Td(html.Img(src=row.img)),
        html.Td(row.name)
    ])
    for row in names.itertuples()
]

# App layout
app.layout = html.Div(children=[
    html.Table([header] + rows)
])

Like I mentioned in my last comment, be sure to replace &colon; in get_image() with a literal colon (:). Otherwise it won't work.

Zach

Hi @amgum
,

Per this Stack Overflow post, I was able to get it to work using the below code.

For reference, I'm using Dash v2.6.1.

import base64

import dataiku
import pandas as pd
from dash import dash_table, html


# Reading imagefrom local folder (Im a non admin)
def get_image():
    client = dataiku.api_client()
    project = client.get_default_project()
    images = dataiku.Folder("folder name")
    with images.get_download_stream("r.png") as file:
        image_data = file.read()
    data = base64.b64encode(image_data).decode("ascii")
    return f"data:image/png;base64,{data}"


image = get_image()
img1 = f"<img src={image} />"

# Craeting a df with the images
names = pd.DataFrame({"name": ["name1", "name2"], "img": [img1, img1]})

# App layout
app.layout = html.Div(
    children=[
        dash_table.DataTable(
            data=names.to_dict("records"),
            columns=[
                {"id": "img", "name": "img", "presentation": "markdown"},
                {"id": "name", "name": "name"},
            ],
            markdown_options={"html": True},
        )
    ]
)

EDIT: The final format string in get_image() is supposed to have a literal colon in it instead of &colon; but the formatting got messed up. See the Stack Overflow post for how it's supposed to look.

Thanks,

Zach

amgum

Hi Zach thank you for the reply. I tried your method and I'm actually getting the path of the image instead of the image itself.

Any suggestions why this is happening.

# Reading imagefrom local folder (Im a non admin)
def get_image():
client = dataiku.api_client()
project = client.get_default_project()
images = dataiku.Folder("folder")
with images.get_download_stream("image.png") as file:
image_data = file.read()
data = base64.b64encode(image_data).decode("ascii")
return f"data&colon;image/png;base64,{data}"

image = get_image()
img1 = f"<img src={image} />"

# Craeting a df with the images
names = pd.DataFrame({"name": ["name1", "name2"], "img": [img1, img1]})

# App layout
app.layout = html.Div(
children=[
dash_table.DataTable(
data=names.to_dict("records"),
columns=[
{"id": "img", "name": "img", "presentation": "markdown"},
{"id": "name", "name": "name"},
],
markdown_options={"html": True},
)
]
)

Result looking like this

<img src=data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACaElEQVRIie2WsUtbURSHv+Q9yUvV1+czhQRqS6QI0UyKuKiLEHGJi6ObYLO5KK75FxSnTJpNBTGToGRTp9ggRANBCFJBWq15TZu8lzQmHSwppeYlsSgUvOPh3POdc+7vnnst2+8GKm8uTnjsZfkgSZVHpwDWp4A8g/4PkNioo+T14pyfx9bTY+pnlSQ+LS1xs7bWPEjyenGHw0geT13frzs7aJHIX/a6oJauLro3NrC53XUhmfV1zgMBKobRPMgxM1OF/Li8RD89JR+LIagqxbMzAARV5fbmhqtQ6F5IQyDZ5wPg++EhZV3/vVGWsU9O8nFuDiORqBfGXHVWRcHmdpONRtFPThBVFSOZrMLLus7bUAjJ6/03ENy1Kx+LIcoy2d1dyrkchVQKgMzmJoVUio6pKSySZBrHtHVlTePL6iqOQKBaWevAAIKiACA4HLQPD2Ox2cju7ZE7OHgYCOA6HEZQVQRVJX90RD4WA8Da2oqeSFSFISoKFkl6uBgqhoHi9yN5PGS7u/+oKBuNIo+NAWDv66Nwfl5TGMJ7UQyakkolSldX2Ht7KabT5OJxLFZrVeZiZyeZ7W3ahoYwUin04+N7wzQ067StLb7t7yOPjyPKMi1OJ5ViEcXvp5TJ3NlcLtMYDb+wFkni1ews7T4fRjJZHUeVYpGXExMAJAcHa7au7hm5gkHaRkYo6zq319dY7XZe9PcjdnQgKEq1knw8TuHXpGga5AoGcS4u1suFW03jYmGhpuKgxhmJDgevl5cbghTSadLT06Z3CGpU1DY6CsDnlRXTzXoigRaJUNa0ugk9f7eeQU8P+gmNd+k0wqqnvwAAAABJRU5ErkJggg== />

n