23

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.

Improve this question
4
  • Take a look at this: flask.pocoo.org/docs/quickstart/#static-files Commented 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? Commented 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. Commented 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? Commented Jul 22, 2012 at 0:34

3 Answers 3

Reset to default
31

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 :)

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

4 Comments

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!
I'm working on Linux and I had to change Static to static (case sensitivity) before it wourld work.
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.
@AlMartins this comments needs more upvotes I've spent several hours trying to figure this out!
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.

Improve this answer

1 Comment

thanks whtsky. I ended up using the frozen_flask extension which will essentially do the same thing.
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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.