Flask / Bootstrap not showing image

232 Views Asked by Hein du Plessis At 30 April 2023 at 16:09

I have this python flask bootstrap function:

# Index page (main page)
@app.route('/')
def index():
    return render_template('test.html')

And my run code:

if __name__ == '__main__':
    app.run(debug=True)

Of course the default folder will be under the (relative) templates directory so I have there:

templates/test.html templates/images/logo.svg

The source of test.html is:

<!DOCTYPE html>
<html lang="en">
<body>
Hello
<img src="/images/logo.svg">
<img src="images/logo.svg">
</body>
</html>

But when I load the page with the flask supplied link to the app, both images are broken.

I'm guessing my path to my logo.svg is wrong. How do I figure out where it is relative to the app's root?

There are 1 best solutions below

Taras Drapalyuk On 30 April 2023 at 16:33

To fix the problem:

Add your images to the static folder in your project, so the path to the logo file will be like ./static/images/logo.svg
Use <img src="{{ url_for('static', filename='images/logo.svg') }}"> in you template.

To know more about static files in Flask read the documentation.