Sign up to take part
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
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},
)
])
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 : in get_image() with a literal colon (:). Otherwise it won't work.
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 : but the formatting got messed up. See the Stack Overflow post for how it's supposed to look.
Thanks,
Zach
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: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: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 |
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 : in get_image() with a literal colon (:). Otherwise it won't work.