Flask, Display a picture outisde the static

SpongeB0B · Aug-06-2020, 05:40 AM

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

***snippsat*** · (This post was last modified: Aug-07-2020, 09:53 PM by snippsat.)

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>

SpongeB0B · Aug-25-2020, 04:55 AM

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

ndc85430 · Aug-25-2020, 06:00 AM

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?

***snippsat*** · (This post was last modified: Aug-25-2020, 06:46 AM by snippsat.)

(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.

SpongeB0B · (This post was last modified: Aug-29-2020, 07:02 AM by SpongeB0B.)

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 !

**nilamo** · Aug-29-2020, 05:15 PM

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

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	[Solved] Private static files	SpongeB0B	1	2,044	Jul-16-2022, 05:36 AM Last Post: SpongeB0B
	SHow image in a static link of Django	pycada	3	4,159	Mar-04-2020, 01:50 AM Last Post: pycada
	display multiple sensors on webpage python flask jinja	pascale	6	7,833	Jan-29-2019, 10:10 AM Last Post: pascale
	flask requests display data from api on webpage with javacript	pascale	0	3,704	Oct-25-2018, 08:30 PM Last Post: pascale
	Django loading static files	Dutchpy	7	27,459	Oct-13-2017, 10:25 AM Last Post: hbknjr

Flask, Display a picture outisde the static

User Panel Messages

Announcements