I'm currently using some Jinja2 templating on my flask app to pull up images on an html page using image paths from a simple sqlite request. I.e. the process is as follows:
1. Retrieve image path from SQLite
In SQLite its simply a text field, i.e.:
imagePath text
For example, this would be something like "post1.png"
2. Format a render template for the html page
Using url_for, create an image element with the given image path, i.e.:
<img src="{{ url_for('static', filename='assets/images/blog/{{ imagePath }}') }}" alt="" class="img-fluid">
So, I would expect to see something like:
<img src="assets/images/blog/post1.png" alt="" class="img-fluid">
But, instead I'm getting some weird url encoding when the page gets rendered, i.e.:
<img src="/static/assets/images/blog/%7B%7B%20post%5B7%5D%20%7D%7D" alt="" class="img-fluid">
Am I doing something wrong in the templating process? Or is there something I can do to remove all of those hex characters that are generated? I tried passing in a string filter but that didn't seem to work either.
Jinja2 documentation says:
When automatic escaping is enabled, everything is escaped by default except for values explicitly marked as safe. Variables and expressions can be marked as safe either in:
- the context dictionary by the application with MarkupSafe.Markup, or
- the template, with the |safe filter
So, you can try to use safe filter ( http://jinja.pocoo.org/docs/2.10/templates/#safe ):
<img src="{{ url_for('static', filename='assets/images/blog/' ~ imagePath ) | safe }}" alt="" class="img-fluid">
or follow other suggestions from Jinja2 template docs.
Related
<img src="{{ url_for('static' , filename = '{{ game["TEAM_1_IMAGE"] }}') }}" width="30" height="30">
I am using the above to display an image for which the image src is stored in a python list, but no image is being displayed. Please help! Thanks!
<img src="{{ url_for('static' , filename = 'game["TEAM_1_IMAGE"]') }}" width="30" height="30">
This also does not work and I just don't know why
Try without quotes round that, assuming game['TEAM_1_IMAGE'] is available in the template:
<img src="{{ url_for('static', filename=game['TEAM_1_IMAGE']) }}" width="30" height="30" />
The mistake in your first codeblock is trying to nest Jinja expressions. Avoid doing this.
In the second codeblock, consider that filename is an argument to the url_for function. The same rules apply within a template expression as if you were passing an argument to a function in pure python:
url_for('static', filename=game["TEAM_1_IMAGE"]) # Works
You can see that this passes the value of game["TEAM_1_IMAGE"] as the filename argument.
The mistake was trying to pass a string as the argument.
filename='game["TEAM_1_IMAGE"]'
It's really all in the question but I'm using python-highcharts to build something like this jsfiddle example for inclusion in a Python Flask app. I can get it to work in the Jupyter notebook from where I can save it to an html file or export it as an iframe or div code block. But I can't get any of these to work in the flask html page. The inclusion block in the flask page looks like:
<p>
{% if result != None %}
<div id="my-chart"></div>
<script type="text/javascript">
{{result|safe}}
</script>
{% endif %}
</p>
and the relevant header parts:
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
I've managed to get it working with pandas-highcharts but in this way I can't send tooltip formatting javascript functions via the dict-to-json-to-browser path... so a solution to either issue would be great.
J.
First off:
Writing JS functions in the HTML can (almost) always be prevented!
One of the first principles you should stick to is to separate your static files. More on that here.
You should only pass the variable into your script using Jinja2/DjangoTemplatingLanguage tags like this, and write all your javascript functionality in your separate .js file, which is then imported along with other scripts, by your example:
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="{{ static_url }}/js/my-highstock-project.js"></script>
This way you have nice code separation and it is also (somewhat) more safe.
Which leads us to the problem at hand; importing...
So secondly:
HighCharts needs jQuery to be implemented before it can work. That is probably your problem.
To import jQuery include this to your header:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
I have code for sharing on pinterest in my site. The issue is that I can't get it to load a custom image.
Right now I have this where image_to_share is the path of the file:
<a href="https://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
&media= {% static image_to_share %}
&description={{photo.description}}"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
When I inspect element in chrome I get the path for the image as :
<img src="http:// /static/assets/uploaded_files/1421974839_3_art2.jpg ">
However, it should look like this:
<img src="/static/assets/uploaded_files/1421974839_3_art2.jpg">
How do I remove the "http://" and the trailing white space so that my image gets rendered properly?
You can simply add your site's domain either hardcoded or with Django site
&media={{your_site_domain}}{% static image_to_share %}
your_site_domain can be example.com e.g.
More on Django sites: https://docs.djangoproject.com/en/1.7/ref/contrib/sites/#django.contrib.sites.models.Site.domain
I am trying to display images inline in Djano while sending HTML Email. I have the HTML Email working. But the images are displayed as an attachment, i followed the steps in https://www.vlent.nl/weblog/2014/01/15/sending-emails-with-embedded-images-in-django/ to display image as attachment. Which i do not want. I want the image to be displayed inline.
In my Django Template i have :
<img src="/static/url/location/image.png" />
The urls.py has the right setting. When i go to :
http://localhost:8000/static/url/location/image.png
i can see the image clearly.
When the email is sent, the image is not displayed and i do not know why. Any help is kindly appreciated.
I am using Django 1.6.2 btw.
EDIT: Implemented the suggestions given below about using Absolute URL.
I did try the absolute URL. Weird part is : When i used a absolute url of some other site, For ex:
<img src="google.com/images/srpr/logo11w.png"; />
the images are displayed inline. When i use the absolute url location of image on my local server, the image is not displayed :-(. Not sure what else i am missing.
You probably need an absolute url to the image on a server. Cannot reference relative images in an email as far as I know.
You could do this for an absolute url to the current host:
<img src="{{ request.get_host }}/static/url/location/image.png" />
You could probably benefit from using the {% static %} tag as well, (if you have static files configured correctly) like this:
<img src="{{ request.get_host }}{% static 'url/location/image.png' %}" />
When I render my template in django 1.2 and display strings with a
<br />
tag I get
<br />
instead?
Meaning I actually see the text
<br />
instead of getting the much desired line break.
I assume you mean that you output the string from a variable using the {{ string }} notation.
If you know the string you are outputting is safe, use the |safe filter.
{{ string|safe }}
I would have to advise against doing this with any data that was supplied by the user without proper inspection.
Django docs