'How to display background image in email letter (gmail smtp)

I use WagtailCMS and I installed wagtail-birdsong plugin (its for sending topics for subscribers) It uses django-mjml for email template. When admin create a letter, he chooses an image as a background for email letter, but this image doesn't appear at all.

I have such HTML- file:

{% extends "mail/base.html" %}

{% load wagtailimages_tags %}

{% block email_body %}
    {% image self.header_background original as bg_img %}
    <mj-hero mode="fluid-height" background-width="600px" background-height="400px" background-url="{{ site.root_url }}{{ bg_img.url }}" padding="100px 0px">
        <mj-text align="center" font-size="32px" color="orange">{{ self.headline }}</mj-text>
    </mj-hero>
    <mj-section css-class="richtext">
        <mj-column>
            <mj-text font-size="18px">Hello {{ contact.email }}!</mj-text>
            {% for b in self.body %}
                {{ b }}
            {% endfor %}
        </mj-column>
    </mj-section>
{% endblock email_body %}

{% block email_head %}
    <mj-style>
        .richtext h3 {
            font-size: 26px;
        }
        .richtext p {
            font-size: 16px;
            line-height: 1.5;
        }
    </mj-style>
{% endblock email_head %}

base file:

{% load mjml %}

{% mjml %}
    <mjml>
        <mj-head>
            {% block email_head %}
            {% endblock email_head %}
        </mj-head>
        <mj-body>
            {% block email_body %}
            {% endblock email_body %}
        </mj-body>
    </mjml>
{% endmjml %}

so when I get this email and going to dev-tools I can see the root to the image and I can see the image via this root, but I also got a long string with google proxy, such as https://ci6.googleusercontent.com/proxy/3-mK3DU etc.. maybe anyone knows how can I fix it, thank you so much screen of the letter



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source