Flask-webage background image doesnt work - python

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()

Related

render_template giving internal server error in aws beanstalk

I am trying to host a simple application in AWS elasticbeanstalk however when I am using render_template it is giving me this error "Internal Server Error
The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application."
Here is my flask code,
from flask import Flask, render_template
import requests
application = Flask(__name__, template_folder="templates", static_folder="static")
#application.route("/")
def index():
return render_template('index.html')
# run the app.
if __name__ == "__main__":
application.debug = True
application.run()
My HTML code,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<h1>Hello, Flask!</h1>
</div>
</body>
</html>
My Dir Structure,
templates
|
------> index.html
application.py
requirments.txt
But When I dont use render_template i dont see any issue, Here is the code,
from flask import Flask, render_template
import requests
application = Flask(__name__, template_folder="templates", static_folder="static")
#application.route("/")
def index():
return "Hello Flask!!"
# run the app.
if __name__ == "__main__":
application.debug = True
application.run()
Thank you in advance.
Edit -
I was able to fix this issue, The problem was with the zip folder which I had created. Once I created a proper zip and uploaded it to aws beanstalk it started working.

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()

Got 404 error while using Flask framework

I was trying to run my html code using flask framework. When I tried to run the python script, it showed 404 error in the browser
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
python script:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/hello/<user>')
def hello_name(user):
return render_template('hello.html', name = user)
if __name__ == '__main__':
app.run(debug = True)
What is the reason of this error?
The code works fine.
Make sure that you keep the html file in templates folder. My folder structure is like this:
flask_app
├── hello.py
└── templates
└── hello.html
And also visiting the http://127.0.0.1:5000/ will cause the error as you did not define any view for root path.
While visiting the indexed path http://127.0.0.1:5000/hello/arsho I got the expected view:
Use jinja to print your name
<html>
<body>
<h1>Hello {{name}}</h1>
</body>
</html>
Go throught the flask quickstart

Python Eve serving static files from a given folder

I build a simple REST api with Eve and Python.
from flask import redirect, send_from_directory, render_template
from eve import Eve
import os
PWD = os.environ.get('PWD')
public = os.path.join(PWD, 'public')
app = Eve(static_folder=public)
# serve index.html
#app.route('/')
def index():
return send_from_directory(public, 'index.html')
# start the app
if __name__ == '__main__':
app.run()
Where I just serve a static HTML files from /public folder when / is requested.
I'm using bower to install bootstrap:
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
But the problem is that the files are not being found although the path is correct.
Can someone explain me why is this happening?
It took me ages to figure this out. You have to import send_from_directory explicitly and also use __name__
from eve import Eve
from flask import send_from_directory
app = Eve(__name__, static_folder="static")
#app.route('/')
def index():
return send_from_directory("static", 'index.html')
app.run()
Then in settings.py:
URL_PREFIX="api"
Static file delivery:
http://127.0.0.1:5000/
http://127.0.0.1:5000/static/images/image.jpg
http://127.0.0.1:5000/static/css/style.css
API calls:
http://127.0.0.1:5000/api/person/
Apparently the path for my bower_components should be /public/bower_components/../../
I found in another thread a question regarding templates and it works quite well for static files, too:
template_folder = os.path.join(os.path.dirname(__file__), 'templates')
static_folder = os.path.join(os.path.dirname(__file__), 'static')
app = Eve(settings=settings, static_url_path='/static', template_folder=template_folder, static_folder=static_folder)

Fail to show an image using Flask

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)

Categories

Resources