I'm trying do develop a very simple web app using flask, following the example from this link.
My problem is: I want to show images from my file system in that page but it seems like browsers are protected against that. I have to use something like:
<img src="http://aMessyURL.png">
Instead of being able to use something like:
<img src="images/myImageName.png">
So, I can I (dynamically) show images from my file system?
You should be able to do it when hosting a simple server:
https://docs.python.org/2/library/simplehttpserver.html
This should at least allow you to load files in the same folder as your code.
Flask interprets <img src="images/myImageName.png"> as:
app/images/myImageName.png
Normally, Flask projects have a static folder inside app (app/static) which contains your CSS, JS and images. You can either render them like above or use url_for:
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}">
Which renders fully as:
<link rel="shortcut icon" href="/static/img/favicon.png">
You Have to specify static root path and then use code in html below
app = Flask(__name__, static_url_path='')
In HTML
<img src="/static/images/myImageName.png">
Related
I have the next problem:
Im ceating a basic django webpage using HTML and CSS. The issue is that when I try to make the href from the HTML file to the CSS one:
<link rel="stylesheet" type="text/css" href="modelado.css">
It doesn't work correctly. my HTML file called "inicio.html" and "modelado.css" are in the same folder, but once I make the href, the console says this:
Not Found: /inicio/modelado.css
I think that the console is trying to find a folder called "inicio", but that's impossible since inicio is the HTML file from where I am running the program.
What I want to know is if there is another way to write the direction, because that directory doesn't exist.
I also think that this is a django related problem, because when I only use HTML, that line of code actually works when the files are in the same folder.
Thanks!
CSS is not a dynamic file (it is static) so by using
{% load static %}
<link rel="stylesheet" href="{% static 'yourstyle.css' %}">
you can load static files (like css).
More info here
I'm using bottle (the python webframework) to familiarize myself with html, js and css and using localhost to access the site. I can't quite get the css file to be applied to the site that the templates link to. Sometimes it works, but when I edit the file, it doesn't update and even loses the file and can't find it, even after restarting the server. The Console gives the 404 error (file not found), even though I have not moved it.
I first noticed the issue when the CSS wouldn't update in the browser when I refreshed. After clearing out the cache every time I edited, I found the 404 not found issue. I've validated the css file to check if a synthax error was the issue. It came back clean. I redownloaded the bottle.py file in case it needed an update. Still the same result. I also triple checked the link path, even tried to put them all into the same folder with no change.
Here is my file structure:
project folder
static
css
main.css
views
home.tpl
bottle.py
server.py
start.bat (starts the server)
Here is the code in server.py
from bottle import route, run, template
#route('/')
def home():
return template('home')
run(host='localhost', port=8080, debug='True', reloader='True')
Here is the template home.tpl:
<!DOCTYPE html>
<html>
<head>
<title>Bottle Site</title>
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Header!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
</ul>
</div>
<div id="section">
Section text!
</div>
<div id="footer">
© 2019 - <b href="#" id="dev">Footer/b>
</div>
</div>
</body>
</html>
I'd like to reliably be able to apply the css to the site without it crashing and sometimes not finding the file. Whenever I paste a fresh copy of my css file and start the server, it works fine until I try and change the file (a background color, for example. Nothing syntax breaking) but it doesn't update. when I clear the cache, it turns into a plane html file and the console reads:
"GET /static/css/main.css HTTP/1.1" 404 764
I just figured it out.
In the server.py file, you apparently need a:
#route('/static/<filename:path>')
def send_static(filename):
return static_file(filename, root='./static/')
to give the server a route that it can access and find the files (i think).
So in the templates, to show it where they are, you can say:
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
And it will work fabulously every time. :)
Why without the route it sometimes found the file and sometimes not will forever be a mystery of computer science.
Routes are hard.
Have a nice day! :)
I also like to use whitenoise with bottle.
from whitenoise import WhiteNoise
...
botapp = WhiteNoise(botapp)
botapp.add_files(staticfolder, prefix='static/')
Using Tornado, i want to create an html file and save it to re-use it later. Inside the html i want a reference to the bootstrap css in my static files.
My simplfied html looks like this, following Tornado/Python self.render("example.html") ignores CSS
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{static_url('app/content/bootstrap.css')}}" />
</head>
<body>
{{name}}
</body>
</html>
My simplified .py looks like this:
import tornado.template
loader=tornado.template.Loader(r"C:\templateDirectory")
output_from_parsed_template= loader.load("template.html").generate(name="John")
# to save the results
file = open(r"C:\templateDirectory\result.html","w")
file.write(output_from_parsed_template)
file.close()
However, i get the message:
NameError: name 'static_url' is not defined
Many of the predefined names for use in Tornado templates come from RequestHandler, rather than the template system itself (because they need Application-level configuration). To use static_url as-is, you'll need the whole serving stack, not just a Loader and Template.generate (or you can dig into the code and reconstruct what it's doing).
I have a flask app which has both front and back ends. I am using flask_assets to serve both css and js assets.
assets = Environment()
assets.init_app(app)
js = Bundle(common_blueprint.name + '/dist/javascripts/scout.js', output='dist/javascripts/scout.js')
css = Bundle(common_blueprint.name + '/dist/stylesheets/base.css', output='dist/stylesheets/scout.css')
assets.register("js_all", js)
assets.register("css_all", css)
app.register_blueprint(common_blueprint)
Now are are running in a weird issue, every time I deploy the app and hit the url, the application doesn't load the css file.
After few browser hard refreshes the css file is served correctly.
Any help is appreciated.
Thanks
If there is no specific reason to use flask_assets I suggest you to store both js and css files under the folder static in your flask project folder with the structure:
FLASK_PROJECT/static/javascripts/ # for your js files
FLASK_PROJECT/static/stylesheets/ # for your css files
Then in your index.html / base.html file you would load the files as follows:
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='stylesheets/scout.css') }}">
<script type="text/javascript" src="{{ url_for('static',filename='javascripts/scout.js') }}"></script>
For more information you can take a look here
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 21 hours ago.
I'm developing a flask app with the following folder structure:
|-->flask_app.py
|-->static
|-->css
|-->bootstrap.min.css
|-->styles.css
|-->js
|-->jquery-3.1.1.min.js
|-->bootstrap.min.js
|-->script.js
|-->templates
|-->index.html
What is the proper way to link to these css and js files in index.html and what parameters do I need associated with them?
My CSS links look like this and are located in the header:
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
And my JS links look like this and are located at the end of the body tag:
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
Is this the correct syntax? Are they located in the correct spots in my templates (I'm sure there's flexibility here)? And are there any other parameters I should pass in (e.g. type="text/css", type="text/javascript", media="screen")?
Everything is working as expected but I want to follow recommended practice if there is any.
As the Flask documentation mentions, you should store .css and .js files within your static folder and for organizational purposes, its fine to have each type of file as subdirectories (especially as your app grows).
Per this SO answer, you don't need to have type="text/css" or type="text/javascript" in the jinja expression.