Menu
I am using flask, and trying to do something very simple using the quickstart tutorial, just running on my machine (local server). I produce a simple upload form which successfully uploads an image file. I then want to pass this image as a variable to a template.html for display within a page. The template.html file displays fine, but the image is always a broken link image symbol. I've tried a number of different paths, but I have a feeling I am doing things a bit wrong.
import os from flask import Flask, request, redirect, url_for, send_from_directory, render_template UPLOAD_FOLDER = '/home/me/Desktop/projects/flask/uploads' ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) app = Flask(__name__) app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/', methods=['GET', 'POST']) def upload_file(): if request.method == 'POST': file = request.files['file'] if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return redirect(url_for('uploaded_file', filename=filename)) return ''' <!doctype html> <title>Upload new File</title> <h1>Upload new File</h1> <form action="" method=post enctype=multipart/form-data> <p><input type=file name=file> <input type=submit value=Upload> </form> ''' @app.route('/uploads/<filename>') def uploaded_file(filename): filename = 'http://127.0.0.1:5000/uploads/' + filename return render_template('template.html', filename = filename) if __name__ == '__main__': app.run() This is template.html:
<!doctype html> <title>Hello from Flask</title> {% if filename %} <h1>some text<img src="{{filename}}"> more text!</h1> {% else %} <h1>no image for whatever reason</h1> {% endif %} How can I pass the uploaded image file to template.html so it will display correctly?
Thanks
421
To display image on a HTML page with Python Flask, we can pass the image path to the template from the view. Then we call render_template with the template file name, and the user_image argument set to the image path. to interpolate the user_image in the template.
What's happening now is that /uploads/foo.jpg returns the HTML inside template.html. There you try to use /uploads/foo.jpg as the source of the img tag. Nowhere you serve the actual image out.
Let's modify it like this: /show/foo.jpg returns the HTML page and and /uploads/foo.jpg returns the image. Replace the latter route with these two and you should be good to go:
@app.route('/show/<filename>') def uploaded_file(filename): filename = 'http://127.0.0.1:5000/uploads/' + filename return render_template('template.html', filename=filename) @app.route('/uploads/<filename>') def send_file(filename): return send_from_directory(UPLOAD_FOLDER, filename) From the uploaded_file function, we head to the template.html and there will are redirected back <img src="{{ url_for('send_file', filename=filename) }}"> coming back we hit the send_file function which will show the content of the HTML inside the template with image uploaded and stored in the UPLOAD_FOLDER specified. you are also missing from werkzeug import secure_filename this in py file
@app.route('/show/<filename>') def uploaded_file(filename): return render_template('template.html', filename=filename) @app.route('/uploads/<filename>') def send_file(filename): return send_from_directory(UPLOAD_FOLDER, filename) Now your template.html will look like this..
<!doctype html> <title>Hello from Flask</title> {% if filename %} <h1>some text <img src="{{ url_for('send_file', filename=filename) }}">more text!</h1> {% else %} <h1>no image for whatever reason</h1> {% endif %} If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
