Question

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'))

如果我在模板中使用过一次图像，就像这样：

<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">

相关图像标签比较：

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

<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">

顺便说一句：当我手动为图像赋予id属性时，图像的样式正确。否则，如果没有id值，它们的样式将如上所述。

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

0 个答案: