Python Forum

Full Version: Flask, Display a picture outisde the static
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi everyone,

I have a html page under template\about\index.html

Is it possible to display an image who is located in the same path -> template\about\img.jpg ??

Because I have an error ->


template\about\index.html is display on the "/" it's on purpose.
I created app.add_url_rule('/about', 'about', about) to try to solve the access problem but it's not helping.

from flask import Flask, render_template

app = Flask(__name__)


def index():
   return render_template("about/index.html")

def about():
   pass


app.add_url_rule('/', 'index', index)
app.add_url_rule('/about', 'about', about)
index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>About</title>
</head>

<body>
  This is our base template :) <BR>
  

<img src="about/Joker.png">


</body>

</html>
When I point my browser to http://192.168.80.11:5000/about/img.jpg
I get a 404 error (not found) :/
This is the more normal way of doing this is to have a static folder for images,CSS,Js...ect
image_show\
  |-- app.py
    templates\
      |-- index.html
    static\
      images\
        |-- Joker.png
app.py
from flask import Flask, render_template, url_for

app = Flask(__name__)

@app.route('/')
def index():
   return render_template("index.html")

@app.route('/about')
def about():
   pass

if __name__ == '__main__':
    app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>About</title>
</head>
 
<body>
  This is our base template :) <BR>   
  <!-- Two ways -->
  <img src="static/images/Joker.png"> 
  <img src="{{ url_for('static', filename='images/Joker.png') }}"
</body>
 
</html>
Thank you, snippsat.

I know about the static folder too. But I want to avoid this.

Is there a way to use the image under the same folder ? (template)

Thanks
Why would you put static files in the same directory as your templates? Why do you want to avoid using the static directory as suggested?
(Aug-25-2020, 06:00 AM)ndc85430 Wrote: [ -> ]Is there a way to use the image under the same folder ? (template)
There is way as i show under,but not recommended as you can choose any other folder this way,then get some separation between html files and static files.
app = Flask(__name__, static_url_path="", static_folder="templates")
<!-- Two ways -->
<img src="joker.png"> 
<img src="{{ url_for('static', filename='Joker.png') }}"
Now if put Joker.png in templates folder it will work.
First big thank you to Snippsat for your last reply how can do the trick ! (if found another way that I will share with below.)


(Aug-25-2020, 06:00 AM)ndc85430 Wrote: [ -> ]Why would you put static files in the same directory as your templates? Why do you want to avoid using the static directory as suggested?
Indeed good question.
because I found the default mechanism prone to generate mess in your files system.

If you have a template\something\index.html linked with a static\something
when one day you will want to delete you something you have have to delete it from your code from template\something\index.html and most probably you will not deleted static\something because you forgot or other page rely on it.. so it' start to generate garabage.

instated if everything related to template\something\index.html is in the same path and sub folder. once you delete the main folder all the childs are gone in the same moment. So way easier to keep organized and avoid garbage.

My solution
I created a folder junction from template\about\static to static\about :) so (in Windows) if I deleted template\about\ it will deleted also the junction inside the \static :D

stackoverflow not helpful
I have to admit I asked my question there also but WTF !? I'll open another topic for that.
So just to give a big Heart to python-forum.io who is way more human !and where we can solve, express our ideas ! Big thanks !
So this might be a good time to look into Blueprints: https://flask.palletsprojects.com/en/1.1.x/blueprints/

Basically, you take all the related functionality, including static assets like images, bundle them together into a blueprint, and then bind that blueprint to a route. All your files would be in the same place on the filesystem, and would be grouped together logically in code.

The key benefit of having all your static assets in the same place, is so that when you move to deployment, flask isn't the server handling them anyway. Something like nginx or lighttpd handle the static folder, and flask is free to only respond to actual requests. The static assets probably don't change, so they can be heavily cached. But it doesn't sound like that's something you're concerned about yet :)