How to add images to html in a flask app
2 min readOct 5, 2019
A little bit about static in flask
The file structure in flask
When we want to store an image in our web application made from flask, we can store the image in the folder we allocated for flask app, containing the app.py, scripts. The folder i allocated is look, and within look folder, i made a sub folder called static.
Inside static folder, store the image.
Then all that is left now in our html page add the code line
<img src="{{url_for('static', filename='Hermes.png')}}" align="middle" />Then this indicates the url via static to our image, and add the image name
Code in my app.py file
from flask import Flask, render_template, redirect, url_for, request# Route for handling the login page logic
app = Flask(__name__)@app.route('/', methods=['GET', 'POST'])
def home():
return render_template('home.html')#within app.route add the html page we are doing changes to
@app.route('/register')
# def is normally how we define a function in python
def register():
return render_template('register.html')@app.route('/registerV')
def registerV():
return render_template('registerV.html')
In the html file the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head><body>
<div class="bd-example" align="middle">
<img src="{{url_for('static', filename='Hermes.png')}}align="middle" />
</div>
</body>
</html>
You can add more code line in body of html file, i described just the basic code line to add image to flask web app for purpose of explaining.
Thank you for reading
