I'm trying to put background image inside HTML document using following code
<body style="background-image: url( {{url_for('static', filename='img/library2.jpg') }} )">
But it just doesn't work.
My console output is:
127.0.0.1 - - [23/Jan/2017 23:21:12] "GET /index HTTP/1.1" 200 -
127.0.0.1 - - [23/Jan/2017 23:21:12] "GET /static/styles.css HTTP/1.1" 200 -
127.0.0.1 - - [23/Jan/2017 23:21:15] "GET /static/img/favicon.ico HTTP/1.1" 200
So I don't even have get request for the img/library2.jpg.
Not sure what I'm missing
It seems you put style in one file but jinja uses different file to render page.
I don't know what you have in base.html and index.html but usually <body> is in base.html and you should use style in this file.
Related
I'm studying flask, and got problems.
When I wrote code like this:
#app.route("/reference")
def reference():
return render_template("reference.html", css="reference", records=records)
The page http://127.0.0.1:5000/reference was working.
Then I found 'trailing slash' in flask document.
I wanted to apply it, so I edited code like this:
#app.route("/reference/")
def reference():
return render_template("reference.html", css="reference", records=records)
It was working too ! http://127.0.0.1:5000/reference/
But some problems were coming.
The browser couldn't read my css file (in html link.. href=blabla) with a changed log in python terminal.
GET /static/css/style.css HTTP/1.1 << before changing
GET /reference/static/css/style.css HTTP/1.1 << after changing
I redirected css file path,
href="static/css/style.css"
to
href="../static/css/style.css"
And It works.
I wanted to understand how 'trailing slash' do.
So I reset my code to first code.
Then 404 not found error raised and I got a not changed log.
"GET /reference HTTP/1.1" << log for first code
"GET /reference/ HTTP/1.1" << log for second code
"GET /reference/ HTTP/1.1" << log for reset code (== first code)
I got a question. What is happend?
I don't understand why it doesn't run like before.
I read https://flask.palletsprojects.com/en/2.0.x/quickstart/#unique-urls-redirection-behavior
But I still don't understand what is going on.
Why the GET path changed.. why the GET path doesn't changed.. why..
My mind is broken and I can't sleep.. please help me..
On top of what the unique-urls-redirection-behavior document says, when you use tags like <img src='some_url'> or <link href='some_url'> the behaviour may be different, as these URLs are loaded by the browser.
So with a route decorator like #app.route("/reference") which loads in the browser as example.com/reference a link tag with href="subpath/file.css" causes the browser to load that resource from example.com/subpath/file.css
On the other hand, with a route decorator like #app.route("/reference/") (with the trailing slash) which loads in the browser as example.com/reference/ (again, with the trailing slash) a link tag with href="subpath/file.css" causes the browser to load that resource from example.com/reference/subpath/file.css
This could explain the behaviour you are seeing.
To put this another way, consider this test app:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/a')
def a(): return render_template('index.html')
#app.route('/b/') # Note trailing slash
def b(): return render_template('index.html')
Paired with the following template at templates/index.html:
<html>
<head>
<link rel='stylesheet' href='subpath/file.css' />
</head>
Then make some hits and observe the asset requests in the console (they will give 404 errors because I haven't actually created the CSS files, this is just to show what the browser requests):
Load URL: http://localhost:5000/a:
"GET /a HTTP/1.1" 200 -
"GET /subpath/file.css HTTP/1.1" 404 -
Load URL: http://localhost:5000/b/:
"GET /b/ HTTP/1.1" 200 -
"GET /b/subpath/file.css HTTP/1.1" 404 -
Of course the correct way to include these assets is to use the url_for function.
So if I update the template to instead contain:
<link rel='stylesheet' href='{{ url_for("static", filename="file.css") }}' />
Then make the same request:
Load URL: http://localhost:5000/a:
"GET /a HTTP/1.1" 200 -
"GET /static/file.css HTTP/1.1" 404 -
Load URL: http://localhost:5000/b/:
"GET /b/ HTTP/1.1" 200 -
"GET /static/file.css HTTP/1.1" 404 -
As you can see here, the correct path for static assets will always be rendered, regardless of whether the endpoint has a trailing slash or not.
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Why use Flask's url_for?
(1 answer)
Closed 3 years ago.
I have 2 route functions, one to get all users and one to get a specific user. Both functions render the same template. The first function works fine, the problem is with the second one. When rendering the template it tries to load static files from another directory.
I tried using a different template for each one and the problem remained.
Get all users route:
#app.route('/users')
def list_users():
users = Users.query.all()
return render_template('users.html', users=users)
Get one user route:
#app.route('/users/<username>')
def get_user(username):
user = Users.query.filter_by(name=username).first()
if user:
return render_template('users.html', users=[user])
Template rendered by get_user route function:
127.0.0.1 - - [07/Aug/2019 13:35:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:35:57] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/Ana HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/fontawesome-free/css/all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/css/sb-admin-2.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/img/uatronica_black_transparent.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery/jquery.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery-easing/jquery.easing.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/sb-admin-2.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/chart.js/Chart.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-area-demo.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-pie-demo.js HTTP/1.1" 404 -
It is trying to load css files from /users/static/ instead /static/. Why is that?
You are using relative paths in your template, so the final URL is relative to whatever URL you're at. When viewing /users, if the template links to static/css/admin.css, it becomes /users/static/css/admin.css. If the path starts with a /, it is an absolute URL and won't do this.
Instead, use url_for, which generates absolute URLs no matter where you are and how the app is deployed.
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}>
This becomes /static/css/admin.css.
Please use the below code.
Get one user route:
#app.route('/users/<username>')
def get_user(username):
user = Users.query.filter_by(name=username).first()
return render_template('users.html', users=user)
Additionally please share the html page users.html for review.
Im currently working on a project that has the following structure:
ROOT
-js
-dist
-index.html
-bunch of other files that index.html uses
-src
-main.py
-doc_apps
-app1
-index.html
-other resources that index.html needs
-app2
-index.html
-other resources that index.html needs
Now my flask configuration is:
ROOT_DIR = os.path.dirname(os.path.abspath(__file__))
COMPONENT_FOLDER = os.path.abspath(os.path.join(ROOT_DIR, '../'))
DIST_FOLDER = os.path.join(COMPONENT_FOLDER, 'js\\dist')
DOCUMENTATION_FOLDER = os.path.join(COMPONENT_FOLDER, 'documentation_data')
app = Flask(__name__, static_folder=DIST_FOLDER, template_folder=DIST_FOLDER, static_url_path='')
my_loader = jinja2.ChoiceLoader([
app.jinja_loader,
jinja2.FileSystemLoader(DOCUMENTATION_FOLDER),
])
app.jinja_loader = my_loader
#app.route('/')
def index():
"""
This the main entry to the application
Returns
-------
out
renders the 'index.html' file
"""
return render_template('index.html')
#app.route('/get_index_html', methods=['GET'])
def get_index_html():
index_html_path = request.args.get('path')
full_root = os.path.join(index_html_path).replace('\\','/')
return render_template(full_root)
When I start my app and go to the main page im able to render the index.html (the one in the js/dist folder) and everything works great
the problem starts when I try to render one of the inner index.html.
Im able to render the index.html by itself but I get the following errors
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/css/theme.css HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/pygments.css HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/js/modernizr.min.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/jquery.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/underscore.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/doctools.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/js/theme.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/jquery.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:43] "GET /_static/underscore.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:44] "GET /_static/doctools.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Aug/2018 18:08:44] "GET /_static/js/theme.js HTTP/1.1" 404 -
I can tell that the problem is that it cant find the static files that are needed in order to generate this index.html correctly.
How can I tell it that for this specific index.html use some_static_folder?
I was wondering if there is something like render(html, static_folder=...)
I would like to mention that each one of the App1/index.html
has its own links and those links rely on the inner structure of App1, so how can I configure that when I send App1/index.html it will use some static_folder for everything that will be invoked from that App1/index.html
Some more info, App1/2 can be added also after the server is already running.
thank you very much for your help
Flask seems to be not adding a slash at the url end before the get parameters in every case. But is doing it only in this case.
it changes /users?uid=1 to /users/?uid=1
After changing it to tha it even gives me a 404 error. "The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again."
Here's the code:
from flask import Flask, render_template, jsonify, Response, request
app = Flask(__name__)
#app.route("/users")
#app.route("/post")
#app.route("/bookmarks")
#app.route("/<target>")
def category_browser(target = ""):
if(target != "" and target not in ['categories']):
return render_template("404.html")
else:
return render_template("view.html")
if(__name__ == "__main__"):
app.debug = True;
app.run(port=int(80))
You had a stale cache entry in instance of Chromium when you had the route defined as #app.route("/users/"). You later changed to #app.route("/users") which Chrome still had it cached with the trailing /. Try accessing this simple example using incognito mode and see that /users?uid=1 remaining unchanged and that no 404 is reported. This is what happens when I first accessed it initially (using Chrome 42).
127.0.0.1 - - [07/Jul/2015 14:02:39] "GET /users?target=1 HTTP/1.1" 200 -
Then stopping that script (thanks for that complete almost self-contained example) and add #app.route("/users/") to the list of routes, below the original #app.route("/users/") route (to have a higher order of precedence so that Flask first trigger the redirect), i.e.:
#app.route("/users")
#app.route("/users/")
(Or simply remove the #app.route("/users") decorator)
Now try accessing the same page again in your incognito session, note that in your console:
127.0.0.1 - - [07/Jul/2015 14:04:11] "GET /users?target=1 HTTP/1.1" 301 -
127.0.0.1 - - [07/Jul/2015 14:04:11] "GET /users/?target=1 HTTP/1.1" 200 -
Ah, there's your redirect. Remove that extra line we just added, try going to /users?target=1 again, this is what happens:
127.0.0.1 - - [07/Jul/2015 14:07:22] "GET /users/?target=1 HTTP/1.1" 404 -
Chrome silently rewrites the URL to /users/?target=1 based on the cache entry in the incognito mode, and is reflected because only that URL is showing up on the Flask access log.
If you wish to support both methods, you have to do it this way:
#app.route("/users/")
#app.route("/users")
Then both access methods work:
127.0.0.1 - - [07/Jul/2015 14:08:49] "GET /users/?target=1 HTTP/1.1" 200 -
127.0.0.1 - - [07/Jul/2015 14:08:59] "GET /users?target=1 HTTP/1.1" 200 -
Rather than resulting in:
127.0.0.1 - - [07/Jul/2015 14:10:00] "GET /users?target=1 HTTP/1.1" 301 -
127.0.0.1 - - [07/Jul/2015 14:10:00] "GET /users/?target=1 HTTP/1.1" 200 -
I use google io slide deck, and works fine until I added a link to a video. I have a 11MB video file, which I included in the slide as
<video src="video/out/report.mp4" height="600" controls>
When run the server (server.sh - $open http://localhost:$port/index.html && python -m SimpleHTTPServer $port;), it stucks where the video.
1.0.0.127.in-addr.arpa - - [11/Mar/2013 07:56:18] "GET /images/task.png HTTP/1.1" 200 -
1.0.0.127.in-addr.arpa - - [11/Mar/2013 07:56:18] "GET /images/receive/external.png HTTP/1.1" 200 -
1.0.0.127.in-addr.arpa - - [11/Mar/2013 07:56:18] "GET /video/out/report.mp4 HTTP/1.1" 200 -
there is no activity after the last line. But when open the index.html directly (without a webserver, just double click the file and open in browser), the video loads.
Anything wrong with the video tag url that it prevents loading when run with webserver?
Thanks.
I saw require.js error aswell, which lead to What is a faster alternative to Python's http.server (or SimpleHTTPServer)?
Using node.js server instead worked great.