HTML Como colocar imagens em um arquivo HTML

Pecom6dedos · 31 de janeiro de 2019

Olá pessoal, estou fazendo uma assinatura de e-mail em HTML para a empresa em que trabalho.

Gostaria de saber se é possível inserir uma imagem diretamente no código HTML sem utilizar links externos, pois a maioria das caixas de e-mails de empresas não fazem o download de links externos fazendo com que a visualização da assinatura fique comprometida.

Modelo:


<p><strong>Atenciosamente,</strong></p>
<table style="width: 476px;">
<tbody>
<tr style="height: 124px;">
<td style="width: 217px; height: 124px;"><span style="margin: 0px; padding: 0px; line-height: 100%; display: block; font-family: Helvetica, Arial, sans-serif;"> <a style="text-decoration: none;" href="https://htmlsig.com/t/000001E5570Z"> <img src="data:image/png;base64,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" alt="Exata Servi&ccedil;os Cont&aacute;beis" width="201" height="115" border="0" /> </a> </span>
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
</td>
<td style="width: 303px; height: 124px;"><span style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; color: #212121; display: block;"><span style="font-weight: bold; color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">Fulano Dos Coiso</span>&nbsp;<span style="display: inline; color: #212121; font-family: Helvetica, Arial, sans-serif;">/ </span><span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">T&eacute;cnico em Inform&aacute;tica</span> <span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span><a style="color: #477ccc; text-decoration: none; display: inline;" href="mailto:[email protected]">[email protected]</a><span style="display: inline; color: #212121; font-family: Helvetica, Arial, sans-serif;"> / </span> <span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">+55 99 9 9999 9999</span> </span>
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
<span style="margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; display: block;"><span style="margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; display: block;"><span style="color: #212121;"><strong>Nome Empresa</strong></span>&nbsp;<span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span><span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">99 3101 4804</span> <span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span> <span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">Rua Sem Sa&iacute;da, 256 - Bela Vista - CEP 42937-286</span> <span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span><span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">Teixeira de Freitas/BA</span> <span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span> <span style="display: block; color: #212121; font-family: Helvetica, Arial, sans-serif;"> <a style="color: #477ccc; text-decoration: none; display: inline;" href="http://www.exatacont.com.br/">http://www.naotem.com.br/</a></span></span></span>
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
<span style="margin: 0px; padding: 0px; line-height: 100%; font-size: 1px; display: block; font-family: Helvetica, Arial, sans-serif;"> <a style="text-decoration: none; display: inline;" href="https://htmlsig.com/t/000001EE8R4F"><img style="margin-bottom: 2px; border: none; display: inline;" src="https://s3.amazonaws.com/htmlsig-assets/round/facebook.png" alt="Facebook" width="21" height="21" data-filename="facebook.png" /></a> <span style="white-space: nowrap; font-family: Helvetica, Arial, sans-serif; display: inline;"> <img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="2" /> </span> <a style="text-decoration: none; display: inline;" href="https://htmlsig.com/t/000001EADDKY"><img style="margin-bottom: 2px; border: none; display: inline;" src="https://s3.amazonaws.com/htmlsig-assets/round/instagram.png" alt="Instagram" width="21" height="21" data-filename="instagram.png" /></a> <span style="white-space: nowrap; font-family: Helvetica, Arial, sans-serif; display: inline;"> <img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="2" /> </span> <a style="text-decoration: none; display: inline;" href="https://htmlsig.com/t/000001E5BBEF"><img style="margin-bottom: 2px; border: none; display: inline;" src="https://s3.amazonaws.com/htmlsig-assets/round/youtube.png" alt="Youtube" width="21" height="21" data-filename="youtube.png" /></a> <span style="white-space: nowrap; font-family: Helvetica, Arial, sans-serif; display: inline;"> <img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="2" /> </span> <a style="display: inline; text-decoration: none;" href="https://htmlsig.com/t/000001EBV02M"><img style="margin-bottom: 2px; border: none; display: inline;" src="https://s3.amazonaws.com/htmlsig-assets/round/maps.png" alt="Maps" width="21" height="21" data-filename="maps.png" /></a> <span style="white-space: nowrap; font-family: Helvetica, Arial, sans-serif; display: inline;"> <img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="2" /></span></span>
<div style="text-size-adjust: none !important; -ms-text-size-adjust: none !important; -webkit-text-size-adjust: none !important;">
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
</div>
</td>
</tr>
</tbody>
</table>
<p><span style="margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; display: block;"><span style="margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; display: block;"><span style="color: #212121; font-family: Helvetica, Arial, sans-serif; display: inline;">Esta mensagem pode conter informa&ccedil;&atilde;o confidencial. Se voc&ecirc; n&atilde;o for o destinat&aacute;rio ou a pessoa autorizada a receber esta mensagem, n&atilde;o poder&aacute; usar, copiar ou divulgar as informa&ccedil;&otilde;es nela contidas ou tomar qualquer a&ccedil;&atilde;o baseada nessas informa&ccedil;&otilde;es. Se voc&ecirc; recebeu esta mensagem por engano, favor avisar imediatamente o remetente, respondendo o e-mail e, em seguida, apague-o. Agradecemos sua coopera&ccedil;&atilde;o.This message may contain confidential information.If you are not the addressee or authorized person to receive it for the addressee, you must not use, copy, disclose or take any action based on this message or any information herein. If you have received this message in error, please advise the sender immediately by replying this e-mail message and delete it. Thanks in advance for your cooperation.</span> <span style="display: inline; font-family: Helvetica, Arial, sans-serif;"><br /></span> </span></span></p>
<div style="text-size-adjust: none !important; -ms-text-size-adjust: none !important; -webkit-text-size-adjust: none !important;">
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
<p style="margin: 0; padding: 0; line-height: 10px; display: block; width: 100%; font-size: 1;"><img style="display: block; width: 100%; height: 5px;" src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="508" height="10" /></p>
</div>

lucio_jorge · 31 de janeiro de 2019

Bom dia,

Use a tag img:

navegantenarede · 31 de janeiro de 2019

@Pecom6dedos você pode fazer de duas formas:

1. Fazendo o upload da imagem pelo sistema de e-mail e pegando a URL da imagem (assim ela não sera bloqueada pela empresa).

2. Convertendo a imagem em base64 com um conversor de imagem para base64. Aí basta colar o texto em base64 no atributo src do elemento img, como foi explicado na resposta anterior.

Em ambos os casos a imagem ficaria hospedada no servidor de origem da mensagem de e-mail.