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

Options
amgum
amgum Dataiku DSS Core Designer, Dataiku DSS Adv Designer, Registered Posts: 3

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},

)

])

Tagged:

Best Answer

  • Zach
    Zach Dataiker, Dataiku DSS Core Designer, Dataiku DSS Adv Designer, Registered Posts: 153 Dataiker
    edited July 17 Answer ✓
    Options

    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&colon;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.

Answers

  • Zach
    Zach Dataiker, Dataiku DSS Core Designer, Dataiku DSS Adv Designer, Registered Posts: 153 Dataiker
    edited July 17
    Options

    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&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},
            )
        ]
    )

    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
    amgum Dataiku DSS Core Designer, Dataiku DSS Adv Designer, Registered Posts: 3
    Options

    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
Setup Info
    Tags
      Help me…