37

I am trying to pass a filename of an image and render it on a template, Although I am passing the actual name through it does not display on the page

@app.route('/', methods=['GET','POST']) @app.route('/start', methods=['GET','POST']) def start(): person_to_show = 'tim' profilepic_filename = os.path.join(people_dir, person_to_show, "img.jpg") return render_template('start.html',profilepic_filename =profilepic_filename ) 

For example: profilepic_filename = /data/tim/img.jpg I have tried

{{profilepic_filename}} <img src="{{ url_for('data', filename='tim/img.jpg') }}"></img> 

And I have also tried

<img src="{{profilepic_filename}}"></img> 

Neither of which worked

0

1 Answer 1

79

I have created people_photo in static folder and placed an image named shovon.jpg. From the application.py I passed the image as variable to template and showed it using img tag in the template.

In application.py:

from flask import Flask, render_template import os PEOPLE_FOLDER = os.path.join('static', 'people_photo') app = Flask(__name__) app.config['UPLOAD_FOLDER'] = PEOPLE_FOLDER @app.route('/') @app.route('/index') def show_index(): full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'shovon.jpg') return render_template("index.html", user_image = full_filename) 

In index.html:

<!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <img src="{{ user_image }}" alt="User Image"> </body> </html> 

Output:

enter image description here

Sign up to request clarification or add additional context in comments.

7 Comments

Did anyone else have trouble getting this to work? pycharm tells me Process finished with exit code 0 but localhost:5000 isn't showing any images
@frank, localhost:5000is available as long as the program remains in running state. There might be something that stopped the program and you got Process finished with exit code 0.
How can we display an image from S3 links? Any help would be appreciated.
@vinitkantrod, it is not in the scope of this question. It will be better if you can create a new question regarding S3 bucket image usage in Flask. I think future readers will be benefited.
is there a way to use a sub-folder instead of the static folder and pass through the local ressource error?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.