I have made a leaflet map in python with Folium. I have used markers and popup pictures, and saved the results as a html-file. I then want to share this html with the rest of my team. I want to share the map (html-file) to the web with the help of Flask and Heroku.
The orignal map is created with folium, with the svg-files located at a folder called SVG:
The folium markers are then linked to the svg-files in the this folder.
html_svg=''
When I open the html-file in the browser, the markers is shown with correct SVG( se picture below)
Map open in browser. SVG show up as markers as intended
This works fine. However, when i try to use it with Flask the SVG markers are not shown as seen in this picture:
Map html in Flask
The following code is quite simple :
app = Flask(name)
#app.route('/')
def render_the_map():
return render_template('map.html')
if __name__ == '__main__':
app.run(debug=True)
The SVG wont show up, and I get this error:
127.0.0.1 - - [02/Jun/2021 13:22:40] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2021 13:22:52] "GET /SVG//tot-grey.svg HTTP/1.1" 404 -
127.0.0.1 - - [02/Jun/2021 13:22:52] "GET /SVG//tot.svg HTTP/1.1" 404 -
127.0.0.1 - - [02/Jun/2021 13:22:52] "GET /SVG//tot_cpt.svg HTTP/1.1" 404 -
I have tried to create a Static folder in the Flask app but give me the same result.
Anyone that got any tips on how to show SVG when uploading to the web with Flask ?
Related
I am writing a piece of code but continue to receive a 404 message for my html pages - specifically, "GET /home.html HTTP/1.1" 404 - can anyone help as to why this might be happening and fixes for it? I have put the code below and I am using python and flask.
#bp.route('/')
#bp.route('/home')
def home():
return render_template('home.html')
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.
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.
When i use flash() in #app.before_request, I get what seems like a random number of repeated entries. Refreshing the page over and over will give me between 1 and 4 repeated messages.
There aren't any redirects.
My code is simply:
if app.config['INSTANCE'] == 'DEV':
flash("This data is from the development DB")
Alternatively, I wasn't able to figure out how to access/modify the array of messages that flash() seems to append to other than in the template via get_flashed_messages(). Anyone know how?
You can access the list of waiting messages via flashes = session.get('_flashes', []). You can view the code on Github
On the note of why you're getting a few messages flashing, it's because you're making multiple requests (but probably don't know it). Your web-browser is probably asking for favicon.ico which is a request, so causes a flash, etc. If you're running in debug mode, your console window will show all the requests being handled. For example loading a simple flask example in Chrome causes this to show:
127.0.0.1 - - [21/Jun/2013 16:35:05] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [21/Jun/2013 16:35:05] "GET /favicon.ico HTTP/1.1" 404 -
One is my request to view the homepage, the other is Chrome asking for the favicon (and it being told it doesn't exist).
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.