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!
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
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"/>
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!
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"/>