Django:如果多次引用，电子邮件中的附加图像将丢失CSS

email.css

：

.share-image {
    width: 1em !important;
    height: 1em !important;
    vertical-align: text-bottom !important;
    padding-right: 0.1em !important;
    border-radius: 3px;
}

附加图像的相关

.py

文件：

context['img_ref'] = 'cid:image.png'


msg_html = render_to_string('new_notification.html', context)



msg = EmailMultiAlternatives(subject=msg_subject,
                             body=msg_html,
                             from_email=msg_reply_to,
                             to=[job.profile.user.email],
                             reply_to=[msg_reply_to])

# important to attach images and set related
msg.content_subtype = 'html'
msg.mixed_subtype = 'related'

# configure images
twitter_image = MIMEImage(open(staticfiles_storage.path('img/image.png'), 'rb').read(), _subtype='png')
twitter_image.add_header('Content-ID', '<{}>'.format('image.png'))

context['img_ref']='cid:image.png'
msg_html=render_to_string（'new_notification.html'，context）
msg=EmailMultiAlternations（主题=msg\u主题，
body=msg_html，
from_email=msg_reply_to，
to=[job.profile.user.email]，
回复至=[msg\u回复至]）
#重要的是要附加图像并设置相关的
msg.content_subtype='html'
msg.mixed_subtype='相关'
#配置映像
twitter\u image=MIMEImage（打开（staticfiles\u storage.path（'img/image.png'），'rb'）.read（），'u subtype='png'））
twitter_image.add_头（'Content-ID'，''.format（'image.png'））

如果在模板中使用一次图像，如下所示：

<img src="{{ img_ref }}" class="share-image">

然后正确地应用CSS。但是，如果我将其包括两次：

<img src="{{ img_ref }}" class="share-image">
<img src="{{ img_ref }}" class="share-image">

图像的第二个实例以全尺寸显示，没有应用任何CSS

相关HTML输出：

<p>You asked  <a href="http://localhost:8000/" style="color:#3fb768" target="_blank" data-saferedirecturl="https://www.google.com/url?q=http://localhost:8000/&amp;source=gmail&amp;ust=1535804142931000&amp;usg=AFQjCNHDV8p7_O9_7fcwffIFFHrcOHvHRA">SITENAME</a> to notify you of new music releases.</p>
</span><p> Well, good news! <img class="m_1438313880630078800share-image CToWUd a6T" src="https://mail.google.com/mail/u/1?ui=2&amp;ik=ae535e419d&amp;attid=0.1&amp;permmsgid=msg-f:1610316726037219894&amp;th=1658fe87cf518a36&amp;view=fimg&amp;sz=s0-l75-ft&amp;attbid=ANGjdJ8nMDzcCfqCpQqTJoWyiuThFUZ90tVh551GHTfd4QHEW-GLUUe9AuXr3bSS2_MT61KhIn0cBvTza4Uc8gCX7mczlZrg2bMijWYcxkqhmcd6RSFrgswxt86gkAs&amp;disp=emb" data-image-whitelisted="" tabindex="0">

您要求通知您新的音乐发布

好消息！

相关图像标签比较：

第一张图片（样式正确）：

第二幅图像（样式不正确）：

---

顺便说一句：当我手动为图像赋予

id

属性时，图像的样式是正确的。否则，如果没有id值，它们的样式如上所述。

收到邮件的HTML源是什么样子的？这里可能有其他css交互。我无法仅从您的问题中复制此行为。@MrLister-我已附加HTML输出。

<img class="m_1438313880630078800share-image CToWUd" src="https://mail.google.com/mail/u/1?ui=2&amp;ik=ae535e419d&amp;attid=0.1&amp;permmsgid=msg-f:1610316726037219894&amp;th=1658fe87cf518a36&amp;view=fimg&amp;sz=s0-l75-ft&amp;attbid=ANGjdJ9J4yVF2zrLBlosd_Ge90JPEicSMXksaCbHazRA-iVPY1OArd9XHjMQmFCG8YLa0qIne3e1BREz5SlhowuddjvGxDgqjqn01v-sCERfkHjEaT9vnikIHasxYEU&amp;disp=emb" style="width:1em;height:1em;vertical-align:text-bottom;padding-right:0.1em;color:#31b2c9;border-radius:3px" data-image-whitelisted="">

<img class="m_1438313880630078800share-image CToWUd a6T" src="https://mail.google.com/mail/u/1?ui=2&amp;ik=ae535e419d&amp;attid=0.1&amp;permmsgid=msg-f:1610316726037219894&amp;th=1658fe87cf518a36&amp;view=fimg&amp;sz=s0-l75-ft&amp;attbid=ANGjdJ8nMDzcCfqCpQqTJoWyiuThFUZ90tVh551GHTfd4QHEW-GLUUe9AuXr3bSS2_MT61KhIn0cBvTza4Uc8gCX7mczlZrg2bMijWYcxkqhmcd6RSFrgswxt86gkAs&amp;disp=emb" data-image-whitelisted="" tabindex="0">