Menu
I'm trying to display images located in a folder which is not the default static folder.
My template looks like:
{% extends "layout.html" %}
{% block body %}
Albums
{% for album in albums %}
<img src="{{ album ['ThumbPath'] }}">
{% endfor %}
{% endblock %}
The generated HTML looks like:
<!doctype html>
<title>iPhoto</title>
<link rel=stylesheet type=text/css href="/static/style.css">
<div class=page>
<h1>iPhoto</h1>
<img src="/Users/Darrell/Pictures/iPhoto Library/Thumbnails/2013/08/09/20130809-180444/t264vvMaQM+GJosBP+4q+Q/_DSC1225.jpg">
<img src="/Users/Darrell/Pictures/iPhoto Library/Thumbnails/2013/08/09/20130809-181030/urU3jqSKRgGNNP1MjKhpvg/_DSC1268.jpg">
<img src="/Users/Darrell/Pictures/iPhoto Library/Thumbnails/2013/08/09/20130809-181037/1zYyNYReRg+Sizx8v4BUkw/_DSC0923.jpg">
<img src="/Users/Darrell/Pictures/iPhoto Library/Thumbnails/2013/08/09/20130809-181038/sKzEEB3jSf6GBs2heQIviA/Kelly.jpg">
</div>
How can get the images to be rendered on the generated webpage. The path to the image is correct. It is no option to copy all images to the static folder.
Darrell
613
Look like you have file system path instead site. When you start resource with / then path will start from site root (absolute path for site, without slash or with ./ or ../ is relative) for example if you have site http://test.com then / will be http://test.com/ or /test will be http://test.com/test. You can set path with specific protocol protocol:// or identical for current site // for another sites. You always can found errors with wrong (full) urls in your browser error console.
To get access to file system you must use file:// protocol and you urls will be like file:///Users/Darrell/Pictures/.... But it will work only for your computer and can have security issues. You also can set symbolic link for this files to static folder and this resolve security issues, but not resolve issue with only your computer. To completely resolve this issue better publish this files to your application or on public (private) web servers for images or another static.
141
So here is my project path. I wrote a simple function that would work by allowing it to render on the webpage. I am not a 100% sure if it would work once deployed, so I will update if it does work when deployed.
<img alt="" src="{{ url_for('send_file', filename=image_url) }}" id ="img"/>
This is the code of the HTML element and here is its corresponding code in Python on the server side.
def getImageName(x):
"""
Dealing with Unix Path names and Windows PathNames
"""
if platform.system() == 'Linux':
return x[x.rfind("/")+1:]
return x[x.rfind("\\")+1: ]
def getFolder(x):
y = []
if platform.system() == 'Linux':
y = x.split("/")
else:
y = x.split("\\")
# print(y)
cat_name = ""
if "roomImage" in x:
cat_name+="roomImage/" + y[-2]
elif "lobbyImage" in x:
cat_name+="lobbyImage"
elif "miscImage" in x:
cat_name += "miscImage/" + y[-2]
elif "washroomImage" in x:
cat_name += "washroomImage"
else:
cat_name += "facadeImage"
return cat_name + "/"
@app.route("/send_file/<filename>")
def send_file(filename):
return send_from_directory(app.config["UPLOAD_FOLDER"] +"/" + getFolder(filename) , getImageName(filename))
This works for the most part. By the way, image_url is supposed to the be the absolute path of the image that you can pass as an argument to the Jinja2 template via render_template like so:
return render_template("/contentpage.html",image_url=imgurl)
Don't forget to import send_from_directory and set app.config["UPLOAD_FOLDER"] to the appropriate directory. This isn't the most efficient way to do it
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
