Enviar uma imagem base64 em e-mail HTML

86

Usando um editor de rich text, nossos usuários podem arrastar e soltar uma imagem salva de sua área de trabalho para o editor. A imagem aparece e é exibida corretamente na página da web após o envio.

Como a imagem não é carregada em nenhum lugar, o editor salva a imagem como uma imagem codificada em base64. 

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb

etc.

Mas não aparece - nem no iPhone, nem em duas versões diferentes do Outlook. A imagem está simplesmente quebrada. Queremos ficar com a base64 devido a ela já funcionar com a página da web e a capacidade de visualizar uma imagem se o usuário estiver offline.

email base64 html-email data-uri Vael Victus
fonte
Possível duplicata de Como incorporar com sucesso imagens em HTML para exibição em clientes de webmail?
Amit G

Respostas:

126

O suporte, infelizmente, é brutal na melhor das hipóteses. Aqui está uma postagem sobre o assunto:

https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/

E o conteúdo da postagem: insira a descrição da imagem aqui

Acordes
fonte
2
Marcado como resposta porque é simplesmente a resposta: o suporte é péssimo para base64 e você deve tentar evitá-lo quando puder. Conseguimos fazê-los funcionar, na verdade havia um bug no caso desta questão. No entanto, tivemos que exigir que o Outlook 2007 fosse usado. A Apple funciona muito bem com imagens base64.
Vael Victus
10
Compatível com Outlook 2003, mas não compatível com Outlook 2007? O que eles estão pensando?
cytsunny
5
qual é a alternativa?
Obrigado por isso, eu estava prestes a escrever um post sobre o SO com meu próprio exemplo base64. Presumi que, ao verificar meu e-mail resultante em dois navegadores (GMail e Outlook) e verificar se meu texto em base64 não estava corrompido, ele deveria estar funcionando bem.
Memetican
@AkhilJain isso funcionou para mim stackoverflow.com/a/36870709/5536005
radbrawler
57

Uma abordagem alternativa pode ser incorporar imagens no e-mail usando o cidmétodo. (Basicamente, incluindo a imagem como um anexo e, em seguida, incorporando-a). Na minha experiência, essa abordagem parece ter um bom suporte atualmente.

insira a descrição da imagem aqui

Fonte: https://www.campaignmonitor.com/blog/how-to/2008/08/embedding-images-revisited/

Aaron
fonte
3
de fato, funciona, mas infelizmente alguns serviços de e-mail cobrarão o envio de anexos.
Sombriks
19
Além disso, muitos clientes, incluindo a interface da web do Gmail, irão anexar uma cópia de todas as imagens anexadas no final da mensagem, o que é muito, muito feio.
Daniel Saner