Fail to show an image using Flask - python

I want to show an image in the homepage of a python web application. So far I wrote the following program:
My directories and files
myWebApp/
app/
__init__.py
views.py
templates/
home.html
static/
Desert.jpg
run.py
__init__.py
from flask import Flask
app = Flask(__name__)
from app import views
views.py
from app import app
from flask import render_template
from flask import url_for
#app.route('/')
def root():
imag = url_for ('static', filename = 'Desert.jpg')
tle = "Hey"
return render_template('home.html', imag,tle)
home.html
<html>
<title>{{ tle }}</title>
<body>
<img src="{{ imag }}"/>
</body>
</html>
run.py
from app import app
if __name__ == "__main__":
app.run()
And when I run the run.py, I receive the following Internal Server Error:
What's wrong?

That's not the correct syntax for the render_template function. You need to use keyword arguments:
return render_template('home.html', imag=imag, tle=tle)

Related

Template error while using Flask with blueprints

I am getting a template not found error while trying to run a flask app using blueprints. The template directory is located at the root directory as expected at the same level as the app directory. I am not very sure why this is happening.
The directory structure
root/
app/
blueprint1/
routes.py
__main__.py
templates/
base.html
index.html
routes.py
from flask import Blueprint, render_template
blueprint = Blueprint(
"blueprint", __name__, template_folder="templates")
#blueprint.route("/", methods=["GET", "POST"])
def index():
return render_template("index.html")
Error
raise TemplateNotFound(template)
jinja2.exceptions.TemplateNotFound: index.html
main.py
from flask import Flask
from app.blueprint1.routes import blueprint
def create_app():
app = Flask(__name__)
app.register_blueprint(blueprint)
return app
def _main():
daemon_app = create_app()
daemon_app.run(debug=True)
if __name__ == "__main__":
_main()
This works, I edited it a little
routes.py
from flask import Blueprint, render_template
blueprint = Blueprint("blueprint", __name__, template_folder="../../templates")
#blueprint.route("/", methods=["GET", "POST"])
def index():
return render_template("index.html")
__main__.py
from flask import Flask
from routes import blueprint
def create_app():
app = Flask(__name__)
app.register_blueprint(blueprint)
return app
def _main():
daemon_app = create_app()
daemon_app.run(debug=True)
if __name__ == "__main__":
_main()`
Based on your file structure, your blueprint renders html files from the main template folder. It might work if you remove the template_folder argument from routes.py file.
I copied your codes and tried to emulate the error but it works for me. A year ago I have the same problem and somehow I solved it. Since I can't emulate the error I can't solve your problem.
Instead, I will just give you advise. You are making an effort to create blueprints in their own package, and yet you are using the main template folder. When you have a lot of blueprints managing the template folder will become a challenge. Thus, I recommend putting the html file within the blueprint package itself.
Here's the file structure:
root/
app/
blueprint1/
pages/blueprint1/index.html
routes.py
__main__.py
templates/
base.html
and routes.py should be like this
blueprint = Blueprint(
"blueprint", __name__, template_folder="pages")
#blueprint.route("/", methods=["GET", "POST"])
def index():
return render_template("blueprint1/index.html")

Display image as background in Flask

I am giving my first steps on flask applications.
I would like to know how to show this image as a background and the html text on top?
import flask
app = flask.Flask(__name__)
app.config["DEBUG"] = True
#app.route('/', methods=['GET'])
def home():
return "<h1>Welcome to the API Service</h1><p>This site is a prototype API for displaying dashboards: quick_report, crime_locator.</p>"
app.run()
The most elegant way to solve it, using the templates.
First step is to create a static and templates directory, like this:
--static
|
-- image.png
-- templates
|
-- index.html
--app.py
index.html
<style>
body {
background-image: url("/static/image.png");
}
</style>
<body>
<h1>Welcome to the API Service</h1>
<p>This site is a prototype API for displaying dashboards: quick_report,crime_locator.</p>
</body>
app.py
import flask
app = flask.Flask(__name__, static_folder="static")
app.config["DEBUG"] = True
#app.route('/', methods=['GET'])
def home():
return flask.render_template('index.html')
app.run()

Custom HTTP error templates not being served in Flask

I tried implementing the code from this documentation https://flask.palletsprojects.com/en/1.1.x/patterns/errorpages/, but the custom error template I created for HTTP 404 error is not loading (it loads the default template for Flask). The method that handles the error is not being called and I'm not sure why. Am I implementing the errorhandler correctly?
_init_.py
from flask import Flask
app = Flask(__name__)
def create_app():
from flask_app.main.routes import main
from flask_app.testing_errors.routes import testing_errors
app.register_blueprint(main)
app.register_blueprint(testing_errors)
return app
run.py
from flask_app import create_app
# importing the create_app method above creates the flask application instance after executing the command: flask run
testing_errors/routes.py
from flask import Blueprint, render_template
testing_errors = Blueprint("testing_errors", __name__)
#testing_errors.errorhandler(404)
def page_not_found(e):
print("test")
return render_template("404.html"), 404
404.html
<html lang="en">
<head>
<title>404</title>
</head>
<body>
<h1>404 Page Not Found</h1>
</body>
</html>
since you are using a blueprint to handle the entire Flask app errors which is best practice you need app_errorhandler not errorhandler
#testing_errors.app_errorhandler(404)
def page_not_found(e):
print("test")
return render_template("404.html"), 404
refer to this doc https://flask.palletsprojects.com/en/1.1.x/api/?highlight=app_errorhandler#flask.Blueprint.app_errorhandler

How can I set the 'static' folder when it is not on the index folder, with Flask?

I want to build a site. I have the index folder and the connected folder. Each folder also has a static folder. In the connected/static folder, I have the connected.css file, which I am trying to access, through my blueprint. However, the final page tries to access the connected.css from the index/static folder.
Where am I mistaking?
Useful code:
__init__.py:
from flask import Flask
from .index import index_routes
from .connected import connected_routes
def create_app():
app = Flask(__name__, template_folder="templates", static_folder="static")
app.register_blueprint(index_routes.index_bp)
app.register_blueprint(connected_routes.connected_bp, url_prefix='/connected')
return app
connected_routes.py
from flask import Blueprint
from flask import render_template
connected_bp = Blueprint('connected_bp', __name__, template_folder='templates', static_folder='static', url_prefix='/connected')
#connected_bp.route('/')
def connected():
return render_template('connected.html', title="Connected to Hattrick")
index_routes.py
from flask import Blueprint
from flask import render_template
index_bp = Blueprint('index_bp', __name__, template_folder='templates', static_folder='static')
#index_bp.route('/')
def home():
return render_template('index.html', title="The Best Match Predictor")
connected.html
<link href="{{url_for('static',filename='connected.css')}}" rel="stylesheet">
In the above line I have the problem.
Maybe give this a try:
<link href="{{url_for('connected.static',filename='connected.css')}}" rel="stylesheet">
For some elaboration: https://flask.palletsprojects.com/en/1.1.x/blueprints/#static-files

Flask-webage background image doesnt work

Below is a simple html code
index.html
<html>
<head>
<title>Webpage</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" >
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="sylesheet">
</head>
<body>
<style type=text/css>
background-image: url("static/images/back.png");
</style>
<p>Does the Image Work? </p>
</body>
</html>
This is my Flask code:
app.py
from flask import Flask, render_template
app = Flask(__name__, static_url_path="static", static_folder="static")
#app.route("/")
def main():
return render_template("index.html")
if __name__ == '__main__':
app.run()
I get this error when I tried to inspect the page:
GET http://127.0.0.1:5000/static/images/back.png-404(NOT FOUND)
I read through a couple of other forums, but couldn't find any solution to this problem. My images are in the following folder:
Flaskapp
templates
static
images
back.png
When I open the index.html file, it works perfect, but when I try to run the python file to run the server, the background image isnt seen.
Not really sure how to proceed.
put the static folder next to the flask app
/FlaskApp
-app.py
static/
images/
-back.png
templates/
-index.html
....
you should not have to even tell flask about it... it will just know
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main():
return render_template("index.html")
if __name__ == '__main__':
app.run()

Categories

Resources