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' %}" />
Related
I made a carousel orderable. each instance has an image and char field for the webp file name through the picture element. The webp image loads perfect when I hard code the srcset instead of using a {{variable}}.
Problem is that keeps the admin backend from being dynamic and leaves me hard coding every pic on the site or just the pages I want to rank for on google. Ive read a bunch of other posts but im still stuck. is there any way to serve webp filename cleanly from the backend?
I have read.
load static file with variable name in django
django 1.5 - How to use variables inside static tag
This one was the closest to solving my problem but falls short.
https://snakeycode.wordpress.com/2015/02/20/variables-in-django-static-tags/
carousel orderable fields
carousel_image = models.ForeignKey("wagtailimages.Image", on_delete=models.SET_NULL,related_name="+",)
webp = models.CharField(max_length=100, blank=True, null=True)
home template carousel
{% for loop_cycle in self.carousel_images.all %}
{% image loop_cycle.carousel_image max-750x500 as img %}
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
ok so did some fiddleing and figured it out here is the working code.
<picture>
<source srcset="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" type="image/webp" >
<img src="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" alt="{{ img.alt }}">
</picture>
im sooooo happy!!!!
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.
I am beginner and i dont know where i am doing mistake. i have seen these stack posts Return an image to the browser in python, cgi-bin , Return Image from python CGI using javascript and How to loading/show a picture in a Python CGI page but got no help.
Here is the code:
#!C:\Python27\python
text = """Content-type: text/html\n
<TITLE> CGI 101 </TITLE>
<H1>A SECOND CGI SCRIPT </H1>
<HR>
<P> HELLO,CGI WORLD!</P>
<img src="../imag000.jpg" width=101 height=64 border=0 alt="">
<HR>
"""
print (text)
and on browser it appears small box which is not showing image, like this:
Kindly help.
and folder which contains image is cgi. Kindly see picture:
Here is the best Solution:
<img src="http://localhost/imag000.jpg" width=101 height=64 border=0 alt="">
The HTML claims that the image is in the parent directory, but the server has it in the same directory. Either modify the HTML to match the current image location, or move the image to where the browser is requesting it from.
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'm having an issue where I can't load images from anywhere but my media folder.
For example:
<img src="media/image.png" />
will load just fine
however if i move the "image.png" file 1 more folder deeper to:
<img src="media/folder/image.png" />
"image.png" will not load.
Does anyone have any ideas as to why this is happening?
You need to use django staticfiles module. 'Static' figures out where your files are placed and redirects all requests to this folder
Assuming that your image.png is located in you/yourapp/static/media/folder the following should do.
{% load static %}
<img src="{% static 'media/folder/image.png' %}" />
Read the docs about serving static files with django.
If not in production then perhaps this would be helpful: https://stackoverflow.com/a/52672594/1953366
It worked for me. You can use "/" for PATH to directly map the files. Folder hierarchy is not exposed though.