Discover this year's submissions to the Dataiku Frontrunner Awards and give kudos to your favorite use cases and success stories!READ MORE

Display images from folder in Standard webapp

Solved!
lmartignoni
Level 1
Display images from folder in Standard webapp

Hello!

I would like to display in my frontend images from folder, for example in a <img />

But I can't have the full path because I don't have the folder's path but just its name.

I have found a way to download files from a folder but I don't know how to just display it.

 


filename = "img_path" #path with respect to the folder
stream = folder.get_download_stream(filename)
with stream:
       return send_file(
                io.BytesIO(stream.read()),
                as_attachment=True,
                attachment_filename=filename)

 

Thanks a lot

Regards

0 Kudos
1 Solution
AlexT
Dataiker
Dataiker

Hi,

In case anyone is looking for a solution one way to do this is using the following :

Python Code:

import dataiku
import pandas as pd
from flask import request, send_file
import base64

# Example:
# As the Python webapp backend is a Flask app, refer to the Flask
# documentation for more information about how to adapt this
# example to your needs.
# From JavaScript, you can access the defined endpoints using
# getWebAppBackendUrl('first_api_call')

@app.route('/get_image')
def get_image_from_folder():
    client = dataiku.api_client()
    project = client.get_default_project()
    images = dataiku.Folder("images")
    image_data = images.get_download_stream("image.png").read()
    bdata = base64.b64encode(image_data)
    return json.dumps({"status": "ok", "data": bdata.decode("utf-8")})

 

JS:

$.getJSON(getWebAppBackendUrl('/get_image'), function(data) {

    var imgbase = document.getElementById("img_base64");
    imgbase.textContent += data.data;
    document.querySelectorAll('[id="image"]')[0].src='data&colon;image/png;base64, '+data.data;

});

 

HTML:

<img id="image"/>

View solution in original post

2 Replies
CoreyS
Community Manager
Community Manager

Hi @lmartignoni and welcome to the Dataiku Community. While you wait for a more complete response, if you have the option to use Bokeh as opposed to a Standard Webapp, I wanted to make you aware of this Knowledge Base resource, How-To: Display an Image With Bokeh.

I hope this helps!

Looking for more resources to help you use Dataiku effectively and upskill your knowledge? Check out these great resources: Dataiku Academy | Documentation | Knowledge Base

A reply answered your question? Mark as ‘Accepted Solution’ to help others like you!
0 Kudos
AlexT
Dataiker
Dataiker

Hi,

In case anyone is looking for a solution one way to do this is using the following :

Python Code:

import dataiku
import pandas as pd
from flask import request, send_file
import base64

# Example:
# As the Python webapp backend is a Flask app, refer to the Flask
# documentation for more information about how to adapt this
# example to your needs.
# From JavaScript, you can access the defined endpoints using
# getWebAppBackendUrl('first_api_call')

@app.route('/get_image')
def get_image_from_folder():
    client = dataiku.api_client()
    project = client.get_default_project()
    images = dataiku.Folder("images")
    image_data = images.get_download_stream("image.png").read()
    bdata = base64.b64encode(image_data)
    return json.dumps({"status": "ok", "data": bdata.decode("utf-8")})

 

JS:

$.getJSON(getWebAppBackendUrl('/get_image'), function(data) {

    var imgbase = document.getElementById("img_base64");
    imgbase.textContent += data.data;
    document.querySelectorAll('[id="image"]')[0].src='data&colon;image/png;base64, '+data.data;

});

 

HTML:

<img id="image"/>