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 5 years ago.
I am trying to pass a filename of an image and render it on a template,
Although I am passing the actual name through it does not display on the page
#app.route('/', methods=['GET','POST'])
#app.route('/start', methods=['GET','POST'])
def start():
person_to_show = 'tim'
profilepic_filename = os.path.join(people_dir, person_to_show, "img.jpg")
return render_template('start.html',profilepic_filename =profilepic_filename )
For example: profilepic_filename = /data/tim/img.jpg
I have tried
{{profilepic_filename}}
<img src="{{ url_for('data', filename='tim/img.jpg') }}"></img>
And I have also tried
<img src="{{profilepic_filename}}"></img>
Neither of which worked
I have created people_photo in static folder and placed an image named shovon.jpg. From the application.py I passed the image as variable to template and showed it using img tag in the template.
In application.py:
from flask import Flask, render_template
import os
PEOPLE_FOLDER = os.path.join('static', 'people_photo')
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = PEOPLE_FOLDER
#app.route('/')
#app.route('/index')
def show_index():
full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'shovon.jpg')
return render_template("index.html", user_image = full_filename)
In index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<img src="{{ user_image }}" alt="User Image">
</body>
</html>
Output:
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 6 days ago.
I'm trying to render an image in html in flask, the path is pointing to the correct file but its not rendering some how.
#VIEWS
#inventory_bp.route("/show")
def show_image():
id = 3
image = Images.query.get(id)
upload_folder = app.config['UPLOAD_FOLDER']
image_path = os.path.join(upload_folder, image.filename)
return render_template("image-upload.html",image_url=image_path)
#HTML
<div>
<img src="{{ image_url }}" alt="" />
</div>
UPLOAD_FOLDER = os.path.join(os.getcwd(), 'flaskbp/uploads')
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
The image_path you're creating is the file path on your OS (e.g. C:\path\to\project\flaskbp\uploads\image.png. This is not the right src for the img element on your HTML.
Instead, you can place the uploads folder under the static folder, and then create the URL of the image dynamically.
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/show")
def show_image():
image_path = "uploads/image.png"
return render_template("image.html", image_url=image_path)
<div>
<img src="{{ url_for('static', filename=image_url) }}"/>
</div>
Folder structure:
\---root
| app.py
|
+---static
| \---uploads
| image.png
|
\---templates
image.html
How can i repair errors with my path? I would like my html in a flask to load my stylesheet into the project, but it throws a lot of jinja2 errors. I'm starting with flask framework.
from flask import Flask, redirect, url_for, render_template
import os.path
TEMPLATE_DIR = os.path.abspath('PROJECTS DEV\Extractor_APP\templates')
STATIC_DIR = os.path.abspath('PROJECTS DEV\Extractor_APP\static\styles')
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
#app.route("/")
def home():
return render_template("homepage.html")
#app.route("/<name>")
def name(name):
return render_template("namepage.html")
if __name__ == '__main__':
app.run(debug=True)
<html>
<head>
<title>Flask learning</title>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/homepage.css') }}">
<title>Home page</title>
</head>
<body>
<h1>Home page!</h1>
{% for text in content%}
<p>{{text}}</p>
{% endfor %}
</body>
</html>```
In the root folder of your project, create a static folder for static files like css and js files. See example below:
To generate URLs for static files, use the special 'static' endpoint
name:
url_for('static', filename='style.css')
The file has to be stored on the filesystem as static/style.css.
https://flask.palletsprojects.com/en/2.1.x/quickstart/#static-files
There is also no need to specify static and template folders. Just use: app = Flask(__name__)
I am trying to make the webpage in a way that I can access some images, which are saved in the 'static/images' folder, via a hyperlink embedded under their respective names. I tried embedding a link in a page like this but the webpage had a very small icon that didn't show the image.
<!DOCTYPE html>
<html>
<body>
go
</body>
</html>
from flask import Flask, render_template, session, redirect, request, url_for
import pandas as pd
import os
IMG_FOLDER = os.path.join('static', 'images')
app = Flask(__name__)
app.config['IMG_FOLDER'] = IMG_FOLDER
#app.route('/',methods=["GET"])
def homePage():
return render_template("index.html")
#app.route('/')
#app.route('/goto/<name>')
def show_index(name):
file = name
full_filename = os.path.join(app.config['IMG_FOLDER'], file)
return render_template("goto.html", user_image = full_filename)
if __name__ == "__main__":
app.run(debug=True)
<!DOCTYPE html>
<html>
<body>
<img src="{{ user_image }}" alt="User Image">
</body>
</html>
On the contrary, when I am using this in the following way it shows up fine -
from flask import Flask, render_template, session, redirect, request, url_for
import pandas as pd
import os
IMG_FOLDER = os.path.join('static', 'images')
app = Flask(__name__)
app.config['IMG_FOLDER'] = IMG_FOLDER
#app.route('/',methods=["GET"])
def homePage():
return "hello"
#app.route('/')
#app.route('/goto')
def show_index():
file = 'Koala.png'
full_filename = os.path.join(app.config['IMG_FOLDER'], file)
return render_template("goto.html", user_image = full_filename)
if __name__ == "__main__":
app.run(debug=True)
I may be doing something wrong somewhere. Any help would be much appreciated. I am trying to embed these names in the form of for loop in a data-frame. Anyway, thanks in advance!
full_filename = os.path.join(app.config['IMG_FOLDER'], file) will return static\images\file. However, what you need is: \static\images\file. Therefore, what you need to run is:
full_filename = "\\" + os.path.join(app.config['IMG_FOLDER'], file).
Alternatively, if you want to display the image and have a link to goto, you could do the following:
<!DOCTYPE html>
<html>
<body>
<a href="/goto/{{user_image.split('\\')[3]}}">
<img src="{{user_image}}" alt="User Image">
</a>
</body>
</html>
I wasted a lot of time to find out what is wrong. I need your help now.
I want to render template with image from my filesystem. But it is not working.
Path - string that contains file name
#app.route('/', methods=['GET'])
def main():
return render_template('main.html',image = path)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h2></h2>
<form method="post" enctype="multipart/form-data" action="/uploader">
<input type="file" name="file">
<button type="submit">Upload</button>
</form>
<img src={{ url_for('static', filename = image) }} >//i can't figure how to change this to use {{image}}
</body>
</html>
Just generate full image path in your view and pass it to your template
#app.route('/', methods=['GET'])
def main():
#path is filename string
image_file = url_for('static', filename=path)
return render_template('main.html', image_file=image_file)
and then just use it as full link
<img src={{ image_file}} >
if you have image file (with filename which stored in path) in your static folder this should work
If you was set the static folder like that (or other methods):
from flask import Flask
app = Flask(__name__, static_folder='static')
#app.route('/', methods=['GET'])
def main():
return render_template('main.html', image = url_for("static", filename=path))
or shorter:
return render_template('main.html', image='/static/' + path))
after you will put your image in /static folder you can get it from template:
<img src="{{image)}}">
I think something like this should work.
<img src="{{ url_for('static', filename='image') }}">
Where 'image' refers to the path of the image file inside static folder. Make sure to use the full name of image file along with its file type i.e. jpg, png etc.
This question already has answers here:
Passing HTML to template using Flask/Jinja2
(7 answers)
Closed 4 years ago.
So I want to put an svg file into my page(not as an image, as an xml element) - need it like this so I could dynamically change elements within the page.
and I made a simple code that I thought it'll do:
#app.route('/map_test/')
def test():
svg = render_template('file.svg')
response = make_response(svg)
response.content_type = 'image/svg+xml'
return render_template('test.html', svg=response)
and test.html:
{% block content %}
<section>
{{ svg }}
</section>
{% endblock %}
....which just returned <Response 126181 bytes [200 OK]> instead of svg element...
so... what do I need to do in order to get this to work?
this did the trick:
from flask import Markup
#app.route('/map_test/')
def test():
svg = open('file.svg').read
return render_template('test.html', svg=Markup(svg))
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
img = './static/download.svg'
return render_template('index.html', img=img)
if __name__ == '__main__':
app.run()
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<img src="{{ img }}">
</body>
</html>
put your svg file in dir called static