tag not working when accessing through localhost:5000

Question

Recently, I have started learning html and css to experiment making webpages with flask. Everything has been going great except for the tag.

I can't seem to make the images show up on index.html when accessing through localhost:5000 or IP when accessing from different devices in the network. However, I can see the exact images when I open the index.html file itself on chrome.

Here's how my directory looks like:

Flask
|
|---templates
|       |
|       |---index.html
|       |
|       |---img
|            |
|            |---slideshow
|                    |
|                    |---1.jpg
|       
|---static
|
|---app.py
|
|---forms.py
|
|---models.py
|
|---routes.py

and here's my img tag in the index.html file

<img src = "img/slideshow/1.jpg" style = "width:100%">

I have tried moving the 1.jpg around the directory and even put it in the same folder as the index.html (using only 1.jpg in the img tag), but I know for sure my current path in the img tag is correct since I can see the images when i open the index.html individually.

I have also tried looking at the permissions of the images already and all are allowed already.

Do i have to add something to this code in my route.py?

def index():
    return render_template('index.html', custom_title = "Home")

Use a forward slash as separator i.e. `img/` instead of img\ . Regardless of operating system, that is the appropriate separator in URL paths. — , Aug 08 '20 at 07:32
I am not so familiar with flask to be honest, but you should probably see some server-side logging that shows which URLs the client is trying to access, and you will probably see that what you have at the moment doesn't look right. — , Aug 08 '20 at 07:35
sorry about the "\"... I must have mistakenly type it when trying out random things `"[33mGET /img/slideshow/1.jpg HTTP/1.1[0m" 404 -` is what I get — ragrets, Aug 08 '20 at 07:52
Okay I'm not sure then. It would be worth checking file and directory permissions that the user running the script has access to `1.jpg`. Other than that, I'm not sure why it would give a 404 because it looks like the URL is now correct. — , Aug 08 '20 at 08:10

score 0 · Accepted Answer · answered Aug 08 '20 at 08:19

Serve these images from the static directory, with a directory structure more like:

Flask
|
|---templates
|       |
|       |---index.html
|       
|---static
|       |
|       |---img
|            |
|            |---slideshow
|                    |
|                    |---1.jpg
|
|---app.py

Including them in your template, using Flask's url_for function:

<img src="{{ url_for('static', filename='img/slideshow/1.jpg') }}" style="width:100%" />

tag not working when accessing through localhost:5000

1 Answers1