<img> tag not showing any image

Code Help HTML/CSS/JS
1

Question:
So I have this Flask webpage, which shows a few image files I have uploaded into my repl. However, when I use the <img src="....png"> tag, the image doesn’t show, but instead has a default picture sign.
However, it works on a default HTML repl.
Also, <img src="{{ session['pfp'] }}"> works, but <img src="{{ image_url }}"> doesn’t (might have to do with this:
image
)
Repl link:
I don’t want to send it as it’s meant to be private [1], but I can provide screenshots.
Screenshots:
In my directory:
image
I put it in my code:
image
Gives me this:
image
Happens when this is on other files as well. Even paths to other directories don’t work.
Help!!! PLEASE!!!

  1. But I don’t have Private repls ↩︎

2

In the html code, you should not use the files that are in your file system, but those that are uploaded to your site.

Files such as css, html, js, jpg, png, etc. in a Flask project should be located in the static folder. Flask automatically adds pages with files from the static folder, that is, if you have a file in the static folder script.js, then Flask will automatically create a file on your site along the route for example http://0.0.0.0:80/static/script.js.

To get a file in the html code with the Jinja template engine located in the static folder, you need to use the url_for('static', filename='file.txt').

So, in your case, you need to move the file anon-user-pfp.jpg to the static folder (the folder is located in the root directory). After that, you can use this code in the html file to display the image:

<img src="{{ url_for('static', filename='anon-user-pfp.jpg') }}">

Flask Documentation: Static Files — Flask Documentation (3.0.x)

2 Likes
3

Can I use <img src="/static/image.png"> instead?

4

Yes, you can use it.

2 Likes
5

@NateDhaliwal you can use it, but when using Flask you usually have your HTML in /templates folder and your images in /static/images (a static folder with an images folder inside). It keeps it non cluttered, because like in your case you have a lot of HTML files and it’s nice to keep it another place.

3 Likes