Flask web page cannot find image file

Question

On a Raspberry Pi, I have written a simple Flask app that displays the server's current date and time on a web page. That part works great. The page should also display an image. That part doesn't work. The image is stored in the photos folder under the app folder: Web_Test/photos. I use a css file that is stored in a static folder, and that works great. I use url_for to create the URL to the image:

<p><img src="{{url_for('photos', filename='image1.jpg')}}"></p>

Since photos is not a known endpoint for the url_for command, I used: app.add_url_rule('/photos/<path:filename>', view_func=app.send_static_file) to add the photos folder as an endpoint. Every time I access the web page from a web browser, my command window, that I ran python (python3 photo.py) from, shows GET /photos/image1/jpg HTTP/1.1" 404. There are no specific errors, but also no image. I have read many of the posts on here about this issue, but nothing has helped. This is my photo.py code:

from flask import Flask, render_template
import datetime
app = Flask(__name__)

app.add_url_rule('/photos/<path:filename>', endpoint='photos', view_func=app.send_static_file)
@app.route('/')
def photo():
    now = datetime.datetime.now()
    timeString = now.strftime("%Y-%m-%d %H:%M")
    templateData = {
        'title' : 'Latest Photo',
        'time' : timeString
        }
    return render_template('photo1.html', **templateData)

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=80)

This is my photo1.html code:

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" href='/static/style.css' />
    <title>{{title}}</title>
  </head>

  <body>
    <h1>Latest Photo</h1>
    <h2>Current date and time: {{time}}</h2>
    <p> <img src="{{url_for('photos', filename='image1.jpg')}}"></p>
  </body>
</html>

Any thoughts or suggestions would be greatly appreciated. Thanks!

janos · Accepted Answer · 2017-03-11 04:58:22Z

7

The way your program is currently written, the image will be visible if you reorganize the project layout like this:

project
├── app.py
├── static
│   └── image1.jpg
└── templates
    └── photo1.html

The fact that you want to use send_static_file to display photos suggests that photos are static resources. If that's the case, then it would be better to:

1) Move image1.jpg to static/photos/image1.jpg

2) Change the template like this:

<p> <img src="{{url_for('static', filename='photos/image1.jpg')}}"></p>

3) Drop the app.add_url_rule('/photos/<path:filename>', ...) in app.py

answered Mar 11, 2017 at 4:58

janos

126k31 gold badges242 silver badges253 bronze badges

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

2 Comments

simlc0523 Over a year ago

Thanks for your response. I tried that but got the same problem. The command window shows this now: "GET /static/photo/image1.jpg HTTP/1.1" 404

simlc0523 Over a year ago

Well, duh. Once I spelled the folder name correctly (photos instead of photo), it worked! Thanks! My only concern is that the image in the photos folder will be updated on a periodic basis. Wasn't sure if that would be an issue with a "static" folder.

Vala Khosravi · Accepted Answer · 2021-05-25 06:16:42Z

6

I just created a folder named "static" in the project folder and moved my images to it and my problem got solved.

app.py
static
   |----image.jpg
templates
   |----index.html

and changed index.html file like this:

<img src="/static/image.jpg">

answered May 25, 2021 at 6:16

Vala Khosravi

2,5583 gold badges25 silver badges56 bronze badges

Collectives™ on Stack Overflow

Flask web page cannot find image file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related