Display images from folder in Standard webapp

lmartignoni
lmartignoni Registered Posts: 1 ✭✭✭

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

Best Answer

  • Alexandru
    Alexandru Dataiker, Dataiku DSS Core Designer, Dataiku DSS ML Practitioner, Dataiku DSS Adv Designer, Registered Posts: 1,215 Dataiker
    edited July 17 Answer ✓

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

Answers

Setup Info
    Tags
      Help me…