Flask to Return Image Stored in Database

Flask to return image stored in database

Create a response object with the data and then set the content type header. Set the content disposition header to attachment if you want the browser to save the file instead of displaying it.

@app.route('/images/<int:pid>.jpg')
def get_image(pid):
    image_binary = read_image(pid)
    response = make_response(image_binary)
    response.headers.set('Content-Type', 'image/jpeg')
    response.headers.set(
        'Content-Disposition', 'attachment', filename='%s.jpg' % pid)
    return response

Relevant: werkzeug.Headers and flask.Response

You can pass a file-like object and the header arguments to send_file to let it set up the complete response. Use io.BytesIO for binary data:

return send_file(
    io.BytesIO(image_binary),
    mimetype='image/jpeg',
    as_attachment=True,
    download_name='%s.jpg' % pid)

Prior to Flask 2.0, download_name was called attachment_filename.

How to get images stored in a database and display them on a HTML page using Flask?

I know this isnt the answer you're looking for, but storing the actual images on disk, and only retrieving the filename or location from the database also works.

flask can return this image very easily using

        return flask.redirect(flask.url_for('PATH', filename='YOURIMAGE.png'), code=301)

I guess you have a specific reason to store the images in a database, but maybe this will help you anyway. Note this doesnt return html with the image embedded, but the image only.

How do I save a image using a flask API then return it to my React App can use it

Save the files on the file system will be a more proper method. Here is a minimal example:

from flask import send_from_directory

basedir = os.path.abspath(os.path.dirname(__file__))
uploads_path = os.path.join(basedir, 'uploads')  # assume you have created a uploads folder

@app.route('/img-upload', methods=['POST'])
def upload_image():

    f = request.files['image']
    f.save(os.path.join(uploads_path , f.filename))  # save the file into the uploads folder

    newFile = Mealplan(name=f.filename)  # only save the filename to database
    db.session.add(newFile)
    db.session.commit()

    return jsonify({"Done!" : "The file has been uploaded."})

@app.route('/images/<path:filename>')
def serve_image(filename):
    return send_from_directory(uploads_path, filename)  # return the image

In your React app, you can use the filename to build to the image URL: /images/hello.jpg

Update:

If you can only get the id, the view function will be similar:

@app.route('/get-mealplan-image/<given_mealplan_id>')
def download_img(given_mealplan_id):
    file_data = MealPlan.query.filter_by(id=given_mealplan_id).first()
    return send_from_directory(uploads_path, file_data.name)

How to return images in flask response?

You use something like

from flask import send_file

@app.route('/get_image')
def get_image():
    if request.args.get('type') == '1':
       filename = 'ok.gif'
    else:
       filename = 'error.gif'
    return send_file(filename, mimetype='image/gif')

to send back ok.gif or error.gif, depending on the type query parameter. See the documentation for the send_file function and the request object for more information.

---

Related Topics