Where does flask look for image files?

Asked 29/1, 2015 at 5:46 Answered 11/7, 2023 at 10:59

python file-upload flask web-development-server

101

I am setting up a local server using flask. All I want to do currently is display an image using the img tag in the index.html page. But I keep getting error

GET http://localhost:5000/
ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg 404 (NOT FOUND)

Where does flask look for files? A Little help would be great. My HTML code is

<html>
  <head>

  </head>
  <body>
    <h1>Hi Lionel Messi</h1>

  <img src= "ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg ">

  </body>

</html>

My python code is :

@app.route('/index', methods=['GET', 'POST'])
def lionel(): 
    return app.send_static_file('index.html')

Advisee answered 29/1, 2015 at 5:46 Comment(0)

157

Is the image file ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg in your static directory? If you move it to your static directory and update your HTML as such:

<img src="/static/ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg">

It should work.

Also, it is worth noting, there is a better way to structure this.

File structure:

app.py
static
   |----ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg
templates
   |----index.html

app.py

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

@app.route('/index', methods=['GET', 'POST'])
def lionel(): 
    return render_template('index.html')

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

templates/index.html

<html>
  <head>

  </head>
  <body>
    <h1>Hi Lionel Messi</h1>

  <img src="{{url_for('static', filename='ayrton_senna_movie_wallpaper_by_bashgfx-d4cm6x6.jpg')}}" />

  </body>

</html>

Doing it this way ensures that you are not hard-coding a URL path for your static assets.

Villarreal answered 29/1, 2015 at 6:22 Comment(6)

Is there a way to center the image sourced in this way? – Cosmopolitan 22/4, 2018 at 15:7

@frank yes, just center the image as you normally would. Using url_for doesn't change anything here – Villarreal 22/4, 2018 at 23:1

I used CSS to center this. For whatever reason, it wasn't centering in plan HTML. Sorry, web newb here. Thanks for the fast reply – Cosmopolitan 23/4, 2018 at 0:16

if i use a lot of images, and I store them to the folder name images, can I call the image with 'static' , filename'images/a.jpg'??? – Coriander 20/6, 2021 at 10:50

After two days of depression, I found your answer Thanks alot – Alehouse 9/3, 2023 at 21:3

I tried all sorts of solutions, but this worked. F'ing hell. – Javed 5/5 at 6:36

use absolute path where the image actually exists (e.g) '/home/artitra/pictures/filename.jpg'

or create static folder inside your project directory like this

| templates
   - static/
         - images/
              - yourimagename.jpg

then do this

app = Flask(__name__, static_url_path='/static')

then you can access your image like this in index.html

src ="/static/images/yourimage.jpg"

in img tag

Tacho answered 29/1, 2015 at 6:29 Comment(4)

I was stuck in this issue where I was trying to configure my Apache to serve static images but somehow it was not working. With this solution, I am able to get static images. Thank you – Maeda 12/7, 2018 at 9:39

Do you know whether I can use not only absolute path? – Vittle 13/9, 2019 at 19:27

This works for every single file in the directory. – Delao 24/1, 2020 at 15:49

What's the difference between static_folder and url_static_folder? – Delao 24/1, 2020 at 16:38

From the documentation:

Dynamic web applications also need static files. That’s usually where the CSS and JavaScript files are coming from. Ideally your web server is configured to serve them for you, but during development Flask can do that as well. Just create a folder called static in your package or next to your module and it will be available at /static on the application.

To generate URLs for static files, use the special 'static' endpoint name:
url_for('static', filename='style.css')
The file has to be stored on the filesystem as static/style.css.

Imaginary answered 29/1, 2015 at 6:27 Comment(0)

It took me a while to figure this out too. url_for in Flask looks for endpoints that you specified in the routes.py script.

So if you have a decorator in your routes.py file like @blah.route('/folder.subfolder') then Flask will recognize the command {{ url_for('folder.subfolder') , filename = "some_image.jpg" }} . The 'folder.subfolder' argument sends it to a Flask endpoint it recognizes.

However let us say that you stored your image file, some_image.jpg, in your subfolder, BUT did not specify this subfolder as a route endpoint in your flask routes.py, your route decorator looks like @blah.routes('/folder'). You then have to ask for your image file this way: {{ url_for('folder'), filename = 'subfolder/some_image.jpg' }}

I.E. you tell Flask to go to the endpoint it knows, "folder", then direct it from there by putting the subdirectory path in the filename argument.

Exploration answered 18/3, 2017 at 16:12 Comment(0)

If you harcode src for image in html templates, it will be an app route on flask and the most important thing for image in flask is put it on the static folder

Trusteeship answered 6/11, 2022 at 19:34 Comment(0)

if you have a static folder and inside you have a folder suppose to images and inside in image you type on:

<img src="{{url_for('static', filename='images/prettyprinted.png')}}" />

you have an address static/images/prettyprinted.png

Indiscrimination answered 11/7, 2023 at 10:59 Comment(0)

Recommended topics

Hot tags