Display images from folder in Standard webapp

[lmartignoni]

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

[CoreyS]

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!

[AlexT · Accepted solution]

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:image/png;base64, '+data.data;

});

HTML:

<img id="image"/>