Unable to Embed Image in Email Body

Development
1

Hi everyone,

I’m experiencing an issue with embedding an image in the email body using the code provided below. Despite my efforts, the image does not appear in the email when it is sent.

Zrzut ekranu 2024-08-21 103253
Zrzut ekranu 2024-08-21 1032531206×104 8.49 KB

Here’s a summary of the relevant code:

  1. Email html.erb Template:
Wycena zamówienia
<!DOCTYPE html>
<html>
<body style="background-color: #ffffff; color: #433d43; font-family: Arial, sans-serif; margin: 0; padding: 0;">
    <div style="background-color: #ffffff; color: #433d43; padding: 2em; width: 50%; margin: 0 auto; text-align: center; font-size: 1rem;">

        LOGO
        
        <hr style="border: 0; border-top: 1px solid #919497; margin-top: 1em;" />

        <div style="color: #433d43; font-weight: bold; margin-top: 1em;">
            <div>Request for Quote:</div>
            <div><a href="#{url}" style="color: #6bb2c9; text-decoration: none;"><b>#{seller.name}</b></a></div>
        </div>

        <hr style="border: 0; border-top: 1px solid #919497; margin-top: 1em;" />

        <div style="color: #433d43;; margin-top: 1em;">
            Your team #{config.product_name}
        </div>
    </div>
</body>
</html>
  1. Ruby Code for Sending Email:
require 'open-uri'
require 'base64'

class NotificationFactory::MailerExtension::Seller < NotificationFactory::Mailer
  def self.seller_notification(data)
    # get subject
    result = NotificationFactory::Mailer.template(
      template:   data[:template],
      locale:     'en-us',
      objects:    data[:objects],
      standalone: data[:standalone],
    )

    # rebuild subject
    if data[:main_object].respond_to?(:subject_build)
      result[:subject] = data[:main_object].subject_build(result[:subject])
    end

    image_url = 'http://zammad/api/v1/system_assets/product_logo/17188780'
    image_data = URI.open(image_url).read

    # Encode the image in Base64
    encoded_image = Base64.strict_encode64(image_data)
    image_tag = "<img alt='Product Logo' src='data:image/png;base64,#{encoded_image}' />"
    Rails.logger.info "XXX #{encoded_image}"
    
    # Embed the image in the email body by replacing a placeholder
    result[:body] = result[:body].gsub('LOGO', image_tag)

    NotificationFactory::Mailer.deliver(
      recipient:    data[:seller],
      subject:      result[:subject],
      body:         result[:body],
      content_type: 'text/html',
      message_id:   data[:message_id],
      references:   data[:references],
      attachments:  data[:attachments],
    )
  end
end

Issue:

The LOGO placeholder in the HTML email template is not being replaced with the actual image. The image appears to be properly encoded in Base64, but it does not show up in the email body.

I would appreciate any guidance on why this might be happening and how I can resolve it.

Thank you!

2

Hi,
This code should work, but most email clients do not support base64, you should use CID. only, as far as I know, you should use attachments.inline for this, and I have not found such a function. Maybe @rolfschmidt (sorry for ping) could help you with this.

3

Base64 Images seem to work for me

NotificationFactory::Mailer.deliver(
  recipient: User.find_by(email: 'example-user-login'),
  subject: 'image test',
  body: "hello <img alt='Product Logo' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII' />",
  content_type: 'text/html',
)

image

Maybe your email client is blocking it? Did you check the raw email? You could also try your code with a fixed image, maybe the endpoint delivers a different content-type or something is wrong with the image.

4

Hi,
thanks for reply. I checked it and Gmail is blocking Base64 (on other mail client base64 works for me aswell).
It allows CID but i dont know how to use it same as @Caufland

sry for not specyfying at start

5

Here some quick hack, hope it helps :wink:

cache = UploadCache.new(SecureRandom.uuid)
cache.add(
  filename: 'logo.png',
  data: Base64.decode64('iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII'),
  preferences: {
    "Content-Type"=>"image/png", 
    "Mime-Type"=>"image/png", 
    "Content-ID"=>"205.8b56823d-6a49-4665-b9ac-872a3e636e5b@xxx.zammad.com", 
    "Content-Disposition"=>"inline",
  },
  created_by_id: 1,
)

NotificationFactory::Mailer.deliver(
  recipient: User.find_by(email: 'xxx@xxx.com'),
  subject: 'image test',
  body: "hello <img alt='Product Logo' src='cid:205.8b56823d-6a49-4665-b9ac-872a3e636e5b@xxx.zammad.com' />",
  content_type: 'text/html',
  attachments: cache.attachments
)
1 Like
6

Hi,
It worked for me, thank you very much
:grinning:

1 Like
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.