image as base64 in html problem #160

ZinedineR · 2023-12-13T09:31:34Z

ZinedineR
Dec 13, 2023

Hi, I want to send this html to some mail, but it seems this package can't comprehend how to convert this base64 to actual image. I have provided the result sent in gmail.

The mail func looks like this, basically the body will be filled with the html in bottom of this discussion, ignore the attachmentURL param

func NewMail(email, subject, body, attachmentURL string) errs.Error {
	port, _ := strconv.Atoi(os.Getenv("CONFIG_SMTP_PORT"))
	m := mail.NewMsg()
	if err := m.From(os.Getenv("CONFIG_SENDER_NAME")); err != nil {
		logrus.Printf("failed to set From address: %s", err)
	}
	if err := m.To(email); err != nil {
		logrus.Printf("failed to set To address: %s", err)
	}
	m.Subject(subject)
	m.SetBodyString(mail.TypeTextHTML, body)
.
.
.
c, err := mail.NewClient(os.Getenv("CONFIG_SMTP_HOST"), mail.WithPort(port), mail.WithSMTPAuth(mail.SMTPAuthPlain),
		mail.WithUsername(os.Getenv("CONFIG_AUTH_EMAIL")), mail.WithPassword(os.Getenv("CONFIG_AUTH_PASSWORD")))
	if err != nil {
		logrus.Printf("failed to create mail client: %s", err)
	}
	var sendError error
	for retry := 0; retry < 3; retry++ {
		sendError = c.DialAndSend(m)
		if sendError == nil {
			// Email sent successfully, break the loop
			break
		}
		// Sleep for a moment before retrying (you can adjust the sleep duration)
		time.Sleep(2 * time.Second)
	}

	if sendError != nil {
		// Return an error if all retries fail
		return errs.Wrap(sendError)
	}
	logrus.Print("Mail Sent to: ", email)
	defer os.Remove(pathFile)
	return nil
}

Body parameter's value (I shortened the code for discussion, but basically I inserted img with source of base64):

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
...
<div style="color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
  <div style="line-height: 140%; text-align: left; overflow-wrap: break-word;" class="esd-text">
    <p style="line-height: 170%;"><br></p>
    <p style="line-height: 170%;"><img src="[data:image/jpeg;base64,/9j/4AAQSkZ...]<br></p>
  </div>
...
</body>
</html>

Answered by wneessen

Dec 13, 2023

Btw. I used this web tool to convert my image to base64: https://base64.guru/converter/encode/image/jpg

View full answer

wneessen · 2023-12-13T09:35:49Z

wneessen
Dec 13, 2023
Maintainer

I'll try to reproduce and check what's going on.

0 replies

wneessen · 2023-12-13T09:57:43Z

wneessen
Dec 13, 2023
Maintainer

Hi @ZinedineR,

I wasn't able to reproduce this- given though, I don't have a GMail account, so I can't verify it there. But both my personal webmail and ProtonMail webUI as well Outlook showed the proper base64-dataurl-encoded image.

My webmail:

ProtonMail:

Outlook:

Here is the code I used:

package main

import (
	"context"
	"fmt"
	"os"
	"time"

	"github.com/wneessen/go-mail"
)

var pt = `<!DOCTYPE html>
<html>
<head>
  <title>This is the title</title>
</head>
<body>
<div style="color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
  <div style="line-height: 140%; text-align: left; overflow-wrap: break-word;" class="esd-text">
    <p style="line-height: 170%;"><br></p>
    <p style="line-height: 170%;">
		<img src="data:image/jpg;base64,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">
	</p>
  </div>
  <h2>This is HTML in a H2</h2>
</body>
</html>`

func main() {
	m := mail.NewMsg()
	if err := m.FromFormat("Toni Tester", os.Getenv("TEST_FROM")); err != nil {
		fmt.Printf("failed to set FROM: %s\n", err)
		os.Exit(1)
	}
	if err := m.To(`wn@neessen.net`); err != nil {
		fmt.Printf("failed to set TO: %s\n", err)
		os.Exit(1)
	}
	m.Subject("This is the subject")
	m.SetDate()
	m.SetMessageID()
	m.SetBodyString(mail.TypeTextHTML, pt)

	c, err := mail.NewClient(os.Getenv("TEST_HOST"), mail.WithSMTPAuth(mail.SMTPAuthPlain),
		mail.WithUsername(os.Getenv("TEST_USER")), mail.WithPassword(os.Getenv("TEST_PASS")),
		mail.WithDebugLog())
	if err != nil {
		fmt.Printf("failed to create new client: %s\n", err)
		os.Exit(1)
	}
	if err := c.DialAndSend(m); err != nil {
		fmt.Printf("failed to dial/send: %s\n", err)
		os.Exit(1)
	}
}

1 reply

wneessen Dec 13, 2023
Maintainer

Btw. I used this web tool to convert my image to base64: https://base64.guru/converter/encode/image/jpg

Answer selected by ZinedineR

ZinedineR · 2023-12-14T04:15:34Z

ZinedineR
Dec 14, 2023
Author

Thanks @wneessen for the answer. I have tried using your base64 file and used my GMAIL as the SMTP service.
It seems gmail does not parse base64 image as in security purposes. I have checked via inspect source and the image didn't load.

I would try using another SMTP service for better service.

1 reply

wneessen Dec 14, 2023
Maintainer

Glad you could figure it out. Maybe one suggestion, that should most likely work with Google Mail as well (as it is the most common practice): Instead of inlining the image as data-url, try to embed the images via m.EmbedFile() (optionally with a specific name using mail.WithFileName()) and then in your image tag, refer to the embedded file via CID tag: <img src="cid:logo.png" />

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

image as base64 in html problem #160

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

image as base64 in html problem #160

ZinedineR Dec 13, 2023

Replies: 3 comments · 2 replies

wneessen Dec 13, 2023 Maintainer

wneessen Dec 13, 2023 Maintainer

wneessen Dec 13, 2023 Maintainer

ZinedineR Dec 14, 2023 Author

wneessen Dec 14, 2023 Maintainer

ZinedineR
Dec 13, 2023

Replies: 3 comments 2 replies

wneessen
Dec 13, 2023
Maintainer

wneessen
Dec 13, 2023
Maintainer

wneessen Dec 13, 2023
Maintainer

ZinedineR
Dec 14, 2023
Author

wneessen Dec 14, 2023
Maintainer