HTML 이메일에 이미지 포함

113

gif 이미지가 포함 된 멀티 파트 / 관련 html 이메일을 보내려고합니다. 이 이메일은 Oracle PL / SQL을 사용하여 생성됩니다. 이미지가 빨간색 X로 표시되면서 내 시도가 실패했습니다 (Outlook 2007 및 yahoo 메일).

나는 한동안 html 이메일을 보내 왔지만 이제 내 요구 사항은 이메일에 여러 gif 이미지를 사용하는 것입니다. 웹 서버 중 하나에 저장하고 링크 만 할 수 있지만 많은 사용자 이메일 클라이언트가 자동으로 표시하지 않으며 각 이메일에 대해 설정을 변경하거나 수동으로 다운로드해야합니다.

그래서 제 생각은 이미지를 삽입하는 것입니다. 내 질문은 다음과 같습니다.

내가 여기서 뭘 잘못하고 있니?
임베딩 접근 방식이 올바른가요?
더 많은 이미지를 사용해야하는 경우 다른 옵션이 있습니까? 이미지는 일반적으로 메시지 컨텍스트에서 의미가없는 로고와 아이콘이므로 첨부 파일이 작동하지 않습니다. 또한 이메일의 일부 요소는 온라인 시스템에 대한 링크이므로 정적 PDF를 생성하고 첨부하는 것이 작동하지 않습니다 (내가 아는 한).

단편:

MIME-Version: 1.0
To: me@gmail.com
BCC: me@yahoo.com
From: email@yahoo.com
Subject: Test
Reply-To: email@yahoo.com
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html> 

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--

감사합니다.

BTW : 예, html 자체에 이미지를 포함하고 (헤더 데이터 생성에 동일한 알고리즘 사용) Firefox / IE에서 이미지를 볼 수 있으므로 base64 데이터가 올바른지 확인했습니다.

또한 이것은 스팸이 아니며 이메일이 매일이를 기대하는 특정 고객에게 전송된다는 점에 유의해야합니다. 콘텐츠는 광고가 아닌 데이터 기반입니다.

— tbone
소스

빠른 질문 : 이러한 이미지를 오프 사이트에서 호스팅하고 있습니까? 아니면 이메일에 직접 포함하고 있습니까?

— JonLim

내 질문의 일부는 정말 나도 할 수 있습니다. 나는 그들을 포함 시키려고 여기에 있지만 성공하지는 못했습니다. 링크 만하면 많은 사용자가 먼저 다운로드하지 않고는 이미지를 볼 수 없으므로 피하고 싶습니다.

— tbone

1

정규직 <img src="URL" />은 나를 위해 일했지만 오프 사이트에서 호스팅하는 이미지였습니다. 그것은 당신을 위해 작동하지 않습니까?

— JonLim

"작품"은 주관적입니다 ... 예, 사용자가 매번 이미지를 다운로드 할 의향이 있으면 작동하지만,이를 피하고 이미지를 삽입하고 싶습니다.

— tbone

1

@JonLim : 조사해 주셔서 감사합니다. 내가 놓친 부분에 대한 답변에서 내 의견을 참조하십시오.

— tbone

139

직접 삽입 해보세요. 이렇게하면 이메일의 여러 위치에 여러 이미지를 삽입 할 수 있습니다.

<img src="data:image/jpg;base64,{{base64-data-string here}}" />

이 게시물을 다른 사람들에게 유용하게 만들려면 : base64 데이터 문자열이없는 경우 이미지 파일에서 http://www.motobit.com/util/base64-decoder-encoder.asp 에서 쉽게 만들 수 있습니다. .

이메일 소스 코드는 다음과 같지만 경계가 무엇인지 정말 말할 수 없습니다.

 To: email@email.de
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

// 편집 : 오, 나는 당신이 내 게시물의 첫 번째 코드 스 니펫을 삽입하여 thunderbird로 이메일을 작성하면 thunderbird가 내 게시물의 두 번째 코드와 거의 동일하게 보이도록 html 코드를 자동으로 변경합니다.

— Bernd
소스

5

이것을 먼저 시도했지만 이메일에는 작동하지 않습니다. IE / Firefox에서보기에는 잘 작동하지만 이메일로 보내지는 않습니다.

— tbone

아마도 유 (내용 유형이 어떻게 될지 텍스트 / html로 내가 알아야 할 이메일 헤더를 혼합 HTML / 이미지 파일이 방법 보내?) 방법을 알고

— tbone

1

@Zesty는 @ [username]을 사용하여 누군가에게 경고합니다. 방금 귀하의 질문을 보았습니다. 나는 utl_smtp를 사용합니다. 나를 위해 html 본문, 경계 등으로 CLOB를 만든 다음 utl_smtp를 통해 전송해야했습니다. 간단한 예를 보려면 여기를 참조하십시오. oracle-base.com/articles/misc/EmailFromOraclePLSQL.php 이 링크에는 포함 된 이미지 접근 방식이 표시되지 않지만 자세한 내용 이 포함되어 있습니다.

— tbone

41

이메일의 데이터 URI는 많은 주류 클라이언트에서 지원되지 않으며 사용해서는 안됩니다. 참조 : campaignmonitor.com/blog/post/3927/…

— Michael Böckling 2014 년

2

그것은 hotmail / icloud에서 작동하지 않는 것 같습니다 = (내가 아무것도

— 놓쳤습니까

21

다른 솔루션은 이미지를 첨부 파일로 첨부 한 다음 cid를 사용하여 html 코드를 참조하는 것입니다.

HTML 코드 :

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id="1" src="cid:Logo.jpg">
    </body>
</html>

C # 코드 :

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("abc@xyz.com");
string file = @"C:\Users\acv\Pictures\Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments[0].ContentId = "Logo.jpg";
email.SendAndSaveCopy();

— Khyati Elhance
소스

11

여기에 유용한 답변이 없으므로 솔루션을 제공하고 있습니다.

문제는 multipart/related이 경우 좋지 않은 콘텐츠 유형으로 사용 하고 있다는 것 입니다. 나는 multipart/mixed그것을 사용 하고 있습니다 multipart/alternative(대부분의 클라이언트에서 작동합니다).

메시지 구조는 다음과 같아야합니다.

[Headers]
Content-type:multipart/mixed; boundary="boundary1"
--boundary1
Content-type:multipart/alternative; boundary="boundary2"
--boundary2
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit
[HTML code with a href="cid:..."]

--boundary2
Content-Type: image/png;
name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline; filename="moz-screenshot.png"
[base64 image data here]

--boundary2--
--boundary1--

그러면 작동합니다

— 파벨 페르 나
소스

이것에 어려움을 겪고 있습니다. 위와 똑같이 코딩했지만 이미지가 나타나지 않습니다 (대체 텍스트가있는 프레임, 텍스트가 잘 작동 함). 내 Content-ID는 <filename.jpg>이므로 my href = "cid : filename.jpg"-Content-ID 및 cid의 값 또는 구문에 특별한 트릭이 있습니까?

— Peter Flynn

RFC2392로 확인했는데 CID 표현식이 유효한 것 같습니다. 그러나 여전히 표시되지 않습니다.

— Peter Flynn

비슷한 질문에 대한 답변을 작성하고 구조를 설명하기 위해 ascii 아트를 만들었습니다. stackoverflow.com/a/40420648/633961

— guettli

10

작동하지 않는 경우 이미지를 HTML 테이블로 변환하는 다음 도구 중 하나를 시도해 볼 수 있습니다 (이미지 크기에주의하십시오).

— 어윈 메이어
소스

10

img2hmtl은 제가 한동안 본 것 중 가장 이상한 솔루션 / 아이디어입니다. +1

— Kristjan Liiva 2017

4

Base64를 사용하여 이미지를 html로 임베드하는 것은 훌륭합니다. 그럼에도 불구하고 base64 문자열은 이메일 크기를 크게 만들 수 있습니다.

따라서,

1) 이미지가 많은 경우 이미지를 서버에 업로드하고 해당 이미지를 서버에서로드하면 이메일 크기가 작아 질 수 있습니다. (Google을 통해 많은 무료 서비스를받을 수 있습니다)

2) 메일에 이미지가 몇 개만있는 경우 base64 문자열을 사용하는 것이 확실히 멋진 옵션입니다.

기존 답변에서 제공하는 선택 사항 외에도 명령을 사용하여 Linux에서 base64 문자열을 생성 할 수도 있습니다.

base64 test.jpg

— 브라이언
소스

Michael Böckling이 지적 : 이메일의 데이터 URI는 gmail과 같은 많은 주류 클라이언트에서 지원되지 않습니다

— Mendy

3

나는 이것이 오래된 게시물이라는 것을 알고 있지만 현재 답변은 Outlook 및 다른 많은 이메일 공급자가 인라인 이미지 또는 CID 이미지를 지원하지 않는다는 사실을 다루지 않습니다. 이메일에 이미지를 배치하는 가장 효과적인 방법은 이미지를 온라인으로 호스팅하고 이메일에 링크를 배치하는 것입니다. 작은 이메일 목록의 경우 공개 보관함이 제대로 작동합니다. 이것은 또한 이메일 크기를 작게 유지합니다.

— 스쿠터 크로포드
소스

2

인라인 이미지가 완벽하게 호환 되려면 3 개의 경계가 필요합니다.
모든 것이 multipart/mixed.
그런 다음 multipart/relatedmultipart/alternative 하여 이미지 첨부 헤더 를 포함합니다 .
마지막으로 다운로드 가능한 첨부 파일을 multipart/mixed.

— 스티븐 뉴먼
소스

11

예를 포함하면 도움이 될 것입니다.

— Makyen

7

사양에 대한 참조가 훨씬 더 유용합니다.

— jbruni

2

실제로 Martyn Davies의이 문제에 대한 세 가지 다른 접근 방식의 장단점을 나열한 매우 좋은 블로그 게시물이 있습니다. https://sendgrid.com/blog/embedding-images-emails-facts/ 에서 읽을 수 있습니다 .

CSS 배경 이미지를 사용하는 네 번째 접근 방식을 추가하고 싶습니다.

더하다

<div id="myImage"></div>

이메일 본문과 다음과 같은 CSS 클래스에

#myImage {
    background-image:  url('data:image/png;base64,iVBOR...[some more encoding]...rkggg==');
    width: [the-actual-image-width];
    height: [the-actual-image-height];
}

— GerardV
소스

2

이러한 솔루션 중 하나가 작동하지 않는 사람들을 위해 : 이메일로 인라인 이미지 보내기 @ T30에서 제공하는 솔루션에 제시된 단계에 따라 Outlook에 의해 차단되지 않고 인라인 이미지를 표시 할 수있었습니다 (이전 방법은 차단됨). . 우리와 같이 교환을 사용하는 경우 다음을 수행 할 때도 :

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("email@domain.com");
SmtpClient smtp = new SmtpClient(service.Url.Host);

교환 서비스 URL 호스트를 전달해야합니다. 이 솔루션을 따르는 것 외에는 임베디드 이미지를 쉽게 보낼 수 있습니다.

— tstrand66
소스

1

삽입 / 그림 메뉴 기능을 사용하여 이미지 파일을 삽입하는 경우 Outlook과 Outlook Express 모두 이러한 다중 이미지 이메일 형식을 생성 할 수 있다는 점이 흥미로울 수 있습니다.

분명히 이메일 유형은 일반 텍스트가 아닌 HTML로 설정되어야합니다.

다른 방법 (예 : 드래그 / 드롭 또는 명령 줄 호출)은 이미지가 첨부 파일로 전송됩니다.

그런 다음 이러한 이메일을 자신에게 보내면 형식이 어떻게 지정되었는지 확인할 수 있습니다! :)

FWIW, 명령 줄 모드에서 인라인 이미지를 수행하는 독립 실행 형 Windows 실행 파일을 찾고 있지만 아무것도없는 것 같습니다. 그것은 많은 사람들이 올라간 경로입니다 ... 적절한 형식의 .eml 파일을 전달하여 Outlook Express를 사용하여 수행 할 수 있습니다.

— 베드로
소스

0

다음은이를 달성하는 두 가지 방법으로 작업하는 코드입니다.

using System;
using Outlook = Microsoft.Office.Interop.Outlook;

namespace ConsoleApp2
{
    class Program
    {
        static void Main(string[] args)
        {

            Method1();
            Method2();
        }

        public static void Method1()
        {
            Outlook.Application outlookApp = new Outlook.Application();
            Outlook.MailItem mailItem = outlookApp.CreateItem(Outlook.OlItemType.olMailItem);
            mailItem.Subject = "This is the subject";
            mailItem.To = "john@example.com";
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            var attachments = mailItem.Attachments;
            var attachment = attachments.Add(imageSrc);
            attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x370E001F", "image/jpeg");
            attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F", "myident"); // Image identifier found in the HTML code right after cid. Can be anything.
            mailItem.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/id/{00062008-0000-0000-C000-000000000046}/8514000B", true);

            // Set body format to HTML

            mailItem.BodyFormat = Outlook.OlBodyFormat.olFormatHTML;
            string msgHTMLBody = "<html><head></head><body>Hello,<br><br>This is a working example of embedding an image unsing C#:<br><br><img align=\"baseline\" border=\"1\" hspace=\"0\" src=\"cid:myident\" width=\"\" 600=\"\" hold=\" /> \"></img><br><br>Regards,<br>Tarik Hoshan</body></html>";
            mailItem.HTMLBody = msgHTMLBody;
            mailItem.Send();
        }

        public static void Method2()
        {

            // Create the Outlook application.
            Outlook.Application outlookApp = new Outlook.Application();

            Outlook.MailItem mailItem = (Outlook.MailItem)outlookApp.CreateItem(Outlook.OlItemType.olMailItem);

            //Add an attachment.
            String attachmentDisplayName = "MyAttachment";

            // Attach the file to be embedded
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            Outlook.Attachment oAttach = mailItem.Attachments.Add(imageSrc, Outlook.OlAttachmentType.olByValue, null, attachmentDisplayName);

            mailItem.Subject = "Sending an embedded image";

            string imageContentid = "someimage.jpg"; // Content ID can be anything. It is referenced in the HTML body

            oAttach.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001E", imageContentid);

            mailItem.HTMLBody = String.Format(
                "<body>Hello,<br><br>This is an example of an embedded image:<br><br><img src=\"cid:{0}\"><br><br>Regards,<br>Tarik</body>",
                imageContentid);

            // Add recipient
            Outlook.Recipient recipient = mailItem.Recipients.Add("john@example.com");
            recipient.Resolve();

            // Send.
            mailItem.Send();
        }
    }
}

— 타릭
소스

0

저에게 큰 도움이 된 Pavel Perna의 게시물에 대한 추가 힌트 (내 평판에 대해 언급 할 수 없기 때문에 답변으로 게시) : Microsoft Exchange의 일부 버전에서는 인라인 콘텐츠 처리가 제거되었습니다 ( Microsoft의이 게시물 참조 ). 이미지는 사용자가 Outlook에서 보는 메일의 일부가 아닙니다. 해결 방법으로 "Content-Disposition : attachement"를 대신 사용하십시오. Outlook 2016은 "Content-Disposition : attachement"를 사용하지만 메일 메시지에 사용되는 첨부 파일로 이미지를 표시하지 않습니다.

— Klendatho
소스

-30

Outlook을 사용하여 하이퍼 링크가있는 정적 이미지를 보내는 경우 쉬운 방법은 Word를 사용하는 것입니다.

MS Word 열기
빈 페이지에 이미지 복사
이미지에 하이퍼 링크 추가 (Ctrl + K)
이메일에 이미지 복사

— 클라우디오 비주얼리 제이션
소스