Flask not serving pictures

Viewed 60839

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.

3 Answers

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

Related