22

I created a small Flask app for the purpose of processing and presenting data for my local consumption on my local machine. My Flask app processes data in a subfolder and then opens a webpage to display the processed data. Everything looks great except that images are not being served. For example the resulting HTMl source will have something like:

<img src="/Users/username/Desktop/datafolder/pics/pic1.png" alt="pic1"> 

however there will be no image. The paths are correct so I am guessing it has to do with how images are passed, or not passed, to Flask in the render_template. Perhaps there is a way to specify a media directory as I see in this django post?

Any suggestions on how I might be able to include images would be very welcome.

best regards, zach cp

Edit: As mentioned in the answers and comments, all static files must be in the designated static directory. My use of the "file://" construct triggered the browser to give an error message: "Not allowed to load local resource: file:///Users/username/Desktop/datafolder/pics/pic1.png" which is why I could not see the image. I could use any of the solutions below that result in the images I want to have served in the designated static folder.

4
  • Take a look at this: flask.pocoo.org/docs/quickstart/#static-files
    – Gohn67
    Jul 22, 2012 at 0:08
  • I don't know if this would work, or if you have already tried it, but what happens if you get your template to prepend file:// to the img src? Jul 22, 2012 at 0:11
  • -mathew brown I tried the "file://" trick but it didn't work -gohn67 I saw that documentation but short of moving my pictures to the static directory I am not sure what to do. I imagine there is a way to specify a media directory but I would like to keep my files where they are.
    – zach
    Jul 22, 2012 at 0:14
  • Just pointing this out: If you used the file:// URL, you need to make sure that the path is correct, and the path is case sensitive. For instance, a capital U in users?
    – Hubro
    Jul 22, 2012 at 0:34

3 Answers 3

28

The Flask application defaults the files where it attempts to serve static files as the "static" path in the root directory for the application. Thus, if you run your program in...

C:\Users\username\Desktop\MyApp

the static folder will be

C:\Users\username\Desktop\MyApp\Static

Thus, when attempting to serve

/Users/username/Desktop/datafolder/pics/pic1.png

the file Flask will try to serve will actually be...

C:\Users\username\Desktop\MyApp\Static\Users\username\Desktop\datafolder\pics\pic1.png

This probably isn't right.

Therefore, you can do a few things:

  1. Change the files that are being processed to the "static" folder of where you Flask app is running from, and make the HTML src value relative to that directory

  2. Set the static_folder parameter on the Flask constructor. This allows you to set specifically where the static files will be served from.

    app = Flask(static_folder='C:\\Some\\Directory')
    
  3. As some comments have suggested, change to using the file:// type. If it doesn't work, then post what you're trying, because it should work :)

3
  • thanks for writing that out Mark. I actually have been keeping my Flask app in a totally different directory from my data. However my solution is to use the Frozen_Flask extension which will copy everything to the static folder before serving. Thanks!
    – zach
    Jul 22, 2012 at 15:13
  • I'm working on Linux and I had to change Static to static (case sensitivity) before it wourld work.
    – Anders_K
    Jun 19, 2018 at 11:32
  • Adding / was key to find the image file also on an html page that depends on a temporary token. The Post command was associated with the token and not any specific page with a clear directory path.
    – Al Martins
    Nov 23, 2021 at 15:33
22

Well,you'd better take a look at this: http://flask.pocoo.org/docs/quickstart/#static-files What you need to do:

cd path/to/your/flask/app
mkdir static
mv /Users/username/Desktop/datafolder/pics/pic1.png /static

use <img src="/static/pic1.png" alt="pic1"> in your template.

1
  • thanks whtsky. I ended up using the frozen_flask extension which will essentially do the same thing.
    – zach
    Jul 22, 2012 at 16:06
0

The Flask application defaults the files where it attempts to serve static files as the "static" path in the root directory for the application.

Create Static folder & paste the images in that & give the path as \Static\Img.png

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.