Ruby on Rails: Why doesn't my embedded image display in Gmail or Office 365?

Question

I'm trying to embed images within HTML emails so that they display inline, but for some reason the image does show in Outlook software but not in Gmail (online) or Office 365 (online). I have been referring to http://api.rubyonrails.org/classes/ActionMailer/Base.html as well as the SO question What is the right way to embed image into email using Rails?

And my code is the following:

environments/development.rb and production.rb:

config.action_mailer.asset_host = "http://localhost:3000"

Email view:

<%= image_tag('logo.jpg') %>

This displays the image in Outlook:

But not in Gmail or Office 365:

In the log I get the following img src for this:

<img src="http://localhost:3000/assets/logo-9b88158fa35240340cc52aa5d01800b12e6e1de5ddb99e246bd0583c7a5611cd.jpg" alt="Logo" />

I have tried a variety of approaches from different people, which include the SO questions:

Unable to render inline attachments in ActionMailer Rails attachments inline are not shown correctly in gmail Send HTML emails with inline images with ActionMailer

But none of them seem to solve my issue.

The code I have tried is:

(Attempt 1)

Mailer:

def send_email(email, unsubscribe)
    @url  = 'http://localhost:3000/users/login'
    @email = email
    @unsubscribe = unsubscribe

    attachments.inline['logo.jpg'] = File.read('C:/Sites/MySite/app/assets/images/logo.jpg')
    mail(from: "#{@email.from_name} <#{@email.account.email}>", to: @email.to, cc: @email.cc, bcc: @email.bcc, subject: @email.subject, message: @email.message)
  end

Email View:

<%= image_tag attachments['logo.jpg'].url -%>

Log:

<img src="cid:57cd4b6a997ae_25703efc6dc786d@My-Laptop.mail" />

----==_mimepart_57cd4b6a9af1e_25703efc6dc78787
Content-Type: image/jpeg;
 filename=logo.jpg
Content-Transfer-Encoding: base64
Content-Disposition: inline;
 filename=logo.jpg
Content-ID: <57cd4b6a997ae_25703efc6dc786d@My-Laptop.mail>

QzovU2l0ZXMvRWFzeU1haWwvYXBwL2Fzc2V0cy9pbWFnZXMvbG9nby5qcGc=

----==_mimepart_57cd4b6a9af1e_25703efc6dc78787--

(Attempt 2)

Mailer:

def send_email(email, unsubscribe)
    @url  = 'http://localhost:3000/users/login'
    @email = email
    @unsubscribe = unsubscribe

    # THE BELOW LINE
    attachments.inline['logo.jpg'] = File.join(Rails.root, 'app/assets/images/logo.jpg')
    mail(from: "#{@email.from_name} <#{@email.account.email}>", to: @email.to, cc: @email.cc, bcc: @email.bcc, subject: @email.subject, message: @email.message)
  end

Email View:

<%= image_tag attachments['logo.jpg'].url -%>

(Attempt 3)

Mailer:

def send_email(email, unsubscribe)
    @url  = 'http://localhost:3000/users/login'
    @email = email
    @unsubscribe = unsubscribe
    attachments.inline['logo.jpg'] = {
                                :data => File.read('C:/Sites/MySite/app/assets/images/logo.jpg'),
                                :mime_type => "image/jpg",
                                :encoding => "base64"
    }
    mail(from: "#{@email.from_name} <#{@email.account.email}>", to: @email.to, cc: @email.cc, bcc: @email.bcc, subject: @email.subject, message: @email.message)
  end

Email View:

<%= image_tag attachments['logo.jpg'].url -%>

This gives me a UTF error

(Attempt 4)

Mailer:

  def send_email(email, unsubscribe)
    @url  = 'http://localhost:3000/users/login'
    @email = email
    @unsubscribe = unsubscribe
    attachments.inline["logo.jpg"] = {
        mime_type: "image/jpg",
        content: Base64.encode64(File.read(Rails.root.join("app/assets/images/logo.jpg")))
    }
    mail(from: "#{@email.from_name} <#{@email.account.email}>", to: @email.to, cc: @email.cc, bcc: @email.bcc, subject: @email.subject, message: @email.message)
  end

View:

<%= image_tag "data:image/jpg;base64,#{attachments['logo.jpg'].url}" %>

Log:

<img src="data:image/jpg;base64,cid:57cd4c32e96d0_25704cedd5878982@My-Laptop.mail" />

----==_mimepart_57cd4c32ea670_25704cedd5879035
Content-Type: image/jpg
Content-Transfer-Encoding: base64
Content-Disposition: inline;
 filename=logo.jpg
Content-ID: <57cd4c32e96d0_25704cedd5878982@My-Laptop.mail>

aVZCT1J3bz0K

----==_mimepart_57cd4c32ea670_25704cedd5879035--

But none of these seem to work, its also worth adding that only the code at the top shows the image in Outlook, all the others stop me from seeing the image in Outlook, Gmail, and Office365.

Can someone please help me with this issue as I can't make sense of it.

I am using Rails 4.2.6

score 1 · Answer 1 · answered Sep 11 '16 at 01:22

Gmail absolutely cannot read your image from your computer to show up.

You should upload your logo.jpg to your production server or another host like amazon s3 or google picasa or whatever as long as you have an live photo url: "http://abc.def/logo.jpeg".

Hope this helps you.

Ruby on Rails: Why doesn't my embedded image display in Gmail or Office 365?

1 Answers1