I have a program which generates an image. Now I want to use Flask to make this picture accessible to other users, but I can’t display this image with the following code:
#!/usr/bin/python2
#coding: utf-8
from flask import *
app = Flask(__name__)
#app.run(host='0.0.0.0')
#app.route('/')
def index():
return render_template('hello.html')
if __name__ == '__main__':
app.run(debug=True,host='0.0.0.0')
My template hello.html is:
<!doctype html>
<title>Hello from Flask</title>
<h1>Hello World!</h1>
<img src="./weather-plot.png">
When I run this program and visit the page, I see this:
192.168.0.61 - - [10/Jul/2013 10:22:09] "GET / HTTP/1.1" 200 -
192.168.0.61 - - [10/Jul/2013 10:22:09] "GET /weather-plot.png HTTP/1.1" 200 -
And in my browser I see the title, but not the picture. What’s wrong?
By the way, is there a better method to display a picture without anything else? Maybe I don’t have to use a template?
Are you sure the image is indeed in the location ./, i.e. in the root of your project?
In any case, it is better to use Flask's url_for() method to determine URLs (see http://flask.pocoo.org/docs/api/#flask.url_for) This makes sure that when you move things around, the URLs don't break.
Related
I am trying to show some preview in Flask from user-uploaded images static/uploads and found that URLs generated by url_for('static', filename=image_file_path) do not work as I'd like.
I am getting out a path like: /static/uploads/0321.jpg
and after putting it in HTML img src={{ image_url_list[0] }} I see no preview (with URL: http://127.0.0.1:5000/static/uploads/0321.jpg if I copy the empty image address)
It is 404 error:GET /static/uploads/03020011.jpg HTTP/1.1" 404 -
The file is in its place and I can access it inside the App if remove the first slash static/uploads/0321.jpg
Actually, I'd like to get the working URLs not only for preview but have them externally visible for other sites (but not freely explorable by other users just typing static/uploads in browser).
So, please, advise me what am I doing wrong?
This question already has answers here:
Flask blueprint static directory does not work?
(6 answers)
Closed 4 years ago.
I'm working on creating a personal test-website for myself using Flask, however I discovered a behaviour I can not full get behind and could need some help with.
I have separated my website into indivudial chunks using Flask's blueprint system, because it makes sense for my case (since I want it to contain multiple smaller test-applications). I am suspecting that my problem is rooted in my project stucture, so I am giving a brief overview over what I did. Here is my (simplified) project setup:
>File structure:
root (contains some linux start scripts)
- run.py
- website (the actual flask project folder)
- __init__.py (registers blueprints)
- blueprints
- __init__.py (empty)
- website
- __init__.py (defines routes, creates blueprint)
- static (static files for this blueprint)
- css
- example.css
- templates (render templates for this blueprint)
- example.html.j2
- app1
- <Same structure as above>
- app2
- <Same structure as above>
- ...
>run.py
from website import createApp
createApp().run(debug=True)
>website/__init__.py:
from flask import Flask, render_template
def createApp():
app = Flask(__name__)
app.testing = True
# Website
from blueprints.website import website
app.register_blueprint(website())
# App1
from blueprints.app1 import app1
app.register_blueprint(app1())
# App2
from blueprints.app2 import app2
app.register_blueprint(app2())
...
return app
>website/blueprints/website/__init__.py:
from flask import Blueprint, render_template
bp = Blueprint("website", __name__, url_prefix="/",
template_folder="templates", static_folder="static")
def website():
return bp
#bp.route('/')
def index():
return render_template('example.html.j2')
>website/blueprints/website/templates/example.html.j2
<html>
<head>
<link rel="stylesheet", href="{{url_for('website.static', filename='css/example.css')}}">
<title>Test Page!</title>
</head>
<body>
This is a test page!
</body>
</html>
Expected result: The page should appear with the style defined in example.css
Actual result: Loading the example.css document results in a 404 error.
Since I've tried to deal with this for a few hours now I think I have nailed the problem down to Flask being weird when it comes to the root address.
Since the blueprint defines the address as url_prefix="/" I access it by typing "website.com" into my browser. (The browser tries to call the resource over "website.com/static/css/example.css", but get a 404 response.)
If I change the address to something like url_prefix="/test" and access the page via "website.com/test", the stylesheet will be loaded successfully. (The browser now tries to call the resource over "website.com/test/static/css/example.css", this time the document is found and loaded.)
Since this is supposed to be the main page I do want for it to use the root address though.
I would be grateful for someone to shine some light onto this and explain to me where my error lays.
Interesting question. The only thing I can think off is that you might have specified that website.com/static holds all your static files in your WSGI server script. Therefore, the flask app doesn't interfere which requests to website.com/static and these requests are handled by the WSGI server which can't find them in the folder.
Does this problem also occur when using the development server?
Can you try changing the static server in your WSGI setup to the website/blueprints/static/website folder?
And finally if this doesn't help, can you make a small github repo with this problem? Its pretty hard to reproduce this problem with these kinds of imports and filetrees.
This question already has answers here:
How to serve static files in Flask
(24 answers)
Link to Flask static files with url_for
(2 answers)
Closed 4 years ago.
I'm pretty new to python, even less experienced with flask, and I cannot figure out this issue. I have the following simple web page with jQuery functionality that works great when I double click the file and open it in a browser:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#updateBtn").on("click", function() {
text = "<h2>The div has been updated!</h2>";
$("#jQuery_div").html(text);
});
});
</script>
<div>
<h1>This is a non-jQuery div</h1>
</div>
<div id="jQuery_div">
<h2>This div should update with jQuery</h2>
</div>
<button id="updateBtn">update</button>
</body>
</html>
However, when flask delivers the web page on localhost:5000, the jQuery functionality is no longer present. My python is as follows:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def render():
return render_template("jquery_test.html")
if __name__ == "__main__":
app.run(port=5000, debug=True)
My app's file tree is:
/AJAX_practice
ajax_practice.py
/templates
jquery-3.3.1.js
jquery_test.html
I was trying to follow this tutorial when I couldn't get the "echo" button to work. In my efforts to debug, I have slowly chipped away and drastically simplified the program to the above code to see why I cannot get my jQuery to work through flask. I am still at a loss. I am running the flask app by pressing F5 in IDLE, with no errors in Python 2.7.13 Shell, and the Terminal (from which I started IDLE with $ sudo idle) showing:
my ip - - [date and time] "GET / HTTP/1.1" 200 -
my ip - - [date and time] "GET /jquery-3.3.1.js HTTP/1.1" 404 -
From this, my best guess is that flask cannot find the jquery.3.3.1.js file, though I have tried putting it everywhere in the file tree with no luck. I cannot use the script src to https for jQuery dependencies, as my server will eventually be on a non-internet connected LAN. Am I on the right track? If so, how does flask find and/or navigate jQuery dependencies? Can anyone point me towards some documentation that might help my fundamental understanding of this issue?
Any help on this matter would be greatly appreciated.
You are trying to serve JavaScript file from templates folder. Add a static folder and use that to serve static content.
in your case create a directory structure like "static/js/jquery.min.js"
and then add script reference like this
<script src="{{url_for('static', filename='js/jquery.min.js')}}"></script>
See this :
http://exploreflask.com/en/latest/static.html
If you don't want to keep it in "static" folder and use another local directory you can use send_from_directory as shown in this example :
https://stackoverflow.com/a/20648053/2118215
This has always worked for me with Flask in the past:
<script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
'static' is the name of the folder it's in (and the 'static' folder is in the root of my project). You can edit this to suit your preferred structure and naming, so change 'static' to 'templates' if that's where you'd rather keep your jquery file, although I would recommend keeping it in a separate folder from your HTML templates, purely in the interests of keeping your project well organised.
I believe the path to jquery should be /templates/jquery-3.3.1.js
On me flask server when i serve jquery it has the full path from the home directory: /static/js/jquery.min.js
My background-image works only for this template that has #app.route('/').
<header class="intro-header" style="background-image: url('static/img/home.jpg')">
This works perfectly fine when:
#app.route('/')
def home():
return render_template('post.html')
Everything works. I get this:
127.0.0.1 - - [19/Sep/2016 21:07:11] "GET /static/img/home.jpg HTTP/1.1" 304
But when I use same template with:
#app.route('/post/')
def post():
return render_template('post.html')
I get this:
127.0.0.1 - - [19/Sep/2016 21:15:23] "GET /post/static/img/home.jpg HTTP/1.1" 404 -
And background-image is blank.
This is a simple problem can solved by Flask documentation
Anyway, you should use something like this in your template:
background-image: url({{ url_for('static', filename='img/home.jpg') }})
but if you don't want to use Flask methods use :
url('/static/img/home.jpg')
or use another web server instead of flask default web server for your files like Apache and access via http://yoursite/static/img/home.jpg
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document - w3 CSS
This means that you need to change your url() a bit, to include the leading /.
"background-image: url('/static/img/home.jpg')"
4 years, 7 months too late, but anyways just in case someone needs help..
I found flask recognized my .jpg image was located in 'static', so adding 'static' like so "background-image: url('/static/img/home.jpg')", is adding an "extra" static.
What worked for me, using the skeleton approach,
background-image: url('home.jpg');
Simple and bare, like a skeleton.
I am using Flask as a web framework, and I am trying to implement the first example from the book Getting Started with D3, by Mike Dewar. I have a Python script named run.py and two directories, templates/ and static/, containing index.html and service_status.json, respectively. Unfortunately, my code is not rendering the data at all, nor is it producing any glaring errors.
This is what I have in run.py:
#!/usr/bin/env python
from flask import Flask, render_template, url_for
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__=="__main__":
port = 5000
app.debug = True
app.run( port=port )
This is what I have in templates/index.html:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="utf-8">
<SCRIPT SRC="http://d3js.org/d3.v3.min.js"></SCRIPT>
<SCRIPT>
function draw(data) {
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text( function(d){
return d.name + ": " + d.status;
}
);
}
</SCRIPT>
<TITLE>MTA Data</TITLE>
</HEAD>
<BODY>
<H1>MTA Availability Data</H1>
<SCRIPT>
d3.json("{{ url_for( 'static', filename='service_status.json') }}",draw); // <---- BIG PROBLEM
</SCRIPT>
</BODY>
</HTML>
I am using Windows 7, Google Chrome, and Python 2.7.
If the JSON file is not going to change, then you should put it in the static directory and use
from flask import url_for
url_for('static', filename='service_status.json')
For this to work, also change the path in the JavaScript to '/static/service_status.json'
Static files like your json document, are by default served from a different directory from the templates - by default 'static'
You dont need to use the url_for call in your view, you can use it in your template:
d3.json("{{ url_for('static', filename='service_status.json') }}",draw);
So to summarise: 1) Move your json document in to the static folder (a folder called static along side your templates folder, by default), and 2) use the url_for call in your template to get the correct URI for your json document.
If you want to use a folder other than static, you can change that by passing static_folder to the Flask object contructor
You seem to be getting a 304 status code as you mentioned in earlier comments. I see that your JSON has the following date/time:
"Date": [
"12/15/2011"
],
"Time": [
" 7:35AM"
],
I am not 100% sure but this might help:
http://www.w3.org/Protocols/HTTP/HTRQ_Headers.html#if-modified-since
Basically, it says that
"This request header is used with GET method to make it conditional: if the requested document has not changed since the time specified in this field the document will not be sent, but instead a Not Modified 304 reply.
Format of this field is the same as for Date:"
So, may be you can check the timestamp on the JSON and probably just do a fresh save ?