Simple Steps to Send Emails with Static Images in Django

Diego Carrasco G. — Tue, 09 Jan 2024 08:00:00 GMT

Context

I wanted to send an email with a template that included an image using send_mail from Django. The image was stored in the static folder of the Django project. I wanted to use the Django template system to generate the email content, but I was not sure how to reference the image in the template.

Requirements

I asume you have a Django project with a static folder and a template that you want to use to generate an email.

Issue with {% static %} in Emails

The first thing I tried was to use the {% static %} template tag to generate the URL for the image. However, this tag does not generate a full URL, but a relative URL. This is not a problem when the template is rendered in the browser, but emails need a full URL to access the image.

This means that {% static %} only appends the relative path to the STATIC_URL, which is not sufficient for email clients to locate the image.

Solution - Generating Full URLs in the View (with code snippets)

The solution I found was to generate the full URL in the view and pass it as a context variable to the template.

This involves combining the site's domain with the static file path. This approach uses get_current_site to fetch the current site's domain and static to get the static file path, concatenating these to form a complete URL.

In the view

This is an example code to demonstrate how to create the full URL in a Django view:

This URL is then passed to the email template context and used in the src attribute of the img tag.

Please note that you need to adapt the paths to your project.

# in views.py

# imports we need to create the full URL
from django.contrib.sites.shortcuts import get_current_site
from django.templatetags.static import static

# imports we need to render the template to use in the email
from django.template.loader import render_to_string

# imports we need to send the email
from django.core.mail import send_mail

def my_view(request): # or any other view
    # we get the current site to get the domain
    current_site = get_current_site(request)

    # we get the static file path and concatenate it with the domain
    logo_url = f'https://{current_site.domain}{static("images/your-logo.png")}'

    # we generate a context with the variables we want to use in the template
    context = {
                'logo_url': logo_url,
                # ... other context variables ...
                }

    subject = 'Subject of your email'

    # we render the templates to use in the email
    message_plain = render_to_string('my_template.txt', context)
    message_html = render_to_string('my_template.html', context)

    email = 'test@example.com'

    # we send the email
    send_mail(subject, message_plain, None, [email], html_message=message_html)

In the templates

When you send emails, it is recommended to provide both a plain text and an HTML version of the email. This is why we have two templates in the view.

HTML template

<!-- in my_template.html -->
<img src="{{ logo_url }}" alt="Your Logo">

Plain text template

In my case, I did not need to include the image in the plain text version of the email, but if you need to do so, you can use the same approach as in the HTML template.

<!-- in my_template.txt -->
Your Logo: {{ logo_url }}

Keep in mind

This approach is not limited to images. You can use it to generate full URLs for any static file.
This approach is not limited to emails. You can use it to generate full URLs for any static file in any context and render the templates.

Key Takeaways

Django's {% static %} template tag only generates a relative URL, which is not sufficient for email clients to locate the image.
To generate a full URL for a static file, you need to combine the site's domain with the static file path.
You can use get_current_site to fetch the current site's domain and static to get the static file path, concatenating these to form a complete URL.
You can use this approach to generate full URLs for any static file in any context and render the templates.
You construct the full URL in the view and pass it as a context variable to the template.

Happy coding!

Diego A. Carrasco Gubernatis | Personal Website (Posts about email)