Help us understand the problem. What is going on with this article?

[Rails5]Deviseの認証メールで画像が表示されないからカスタムしてみた。

初めに

認証メールに画像やアイコンを載せたく、試みようとしたらDeviseの認証メールをカスタマイズしないといけなかったので、その経緯を記してみます( ..)φメモメモ

カスタマイズせずに試みたコード

view

<!DOCTYPE html>
<html>
  <%= stylesheet_link_tag 'mailer', media: 'all', 'data-turbolinks-track': 'reload' %>
    <p><%= @email %> ○○○へようこそ!</p>
    <p>メールアドレスの確認をした後にご利用頂けます。</p>
      <%= image_tag 'mail.png' %>
config/application.rb
#ActionMailerのviewに画像を追加する為に
config.action_mailer.asset_host = 'https://'

表示されない、、、

何が原因か探る

・画像を他のviewで表示できたから画像自体に問題ない。
・受け取る側のメール設定に問題ない。
・受け取る側のデバイスに問題はない。
・バイナリーモードになっていて問題ない。
・configに問題ない。

原因

参考1参考2
普通にimage_tagを使っても駄目で、Devise Mailerをカスタマイズしないといけないことが原因だった。

解決

app/mailers/devise_custom_mailer.rb
class DeviseCustomMailer < Devise::Mailer
  before_action :add_inline_attachment!

  private

  def add_inline_attachment!
    pngs = ['mail.png']

    pngs.each do |png|
      attachments.inline[png] = File.read("#{Rails.root}/app/assets/images/mailer/" + png)
    end
  end
end
config/initializers/devise.rb
#追加
config.mailer = 'DeviseCustomMailer'
/app/views/devise/mailer/confirmation_instructions.html.erb
CTYPE html>
<html>
  <%= stylesheet_link_tag    'mailer', media: 'all', 'data-turbolinks-track': 'reload' %>
    <p><%= @email %> ○○○へようこそ!</p>
    <p>メールアドレスの確認をした後にご利用頂けます。</p>
     <%= image_tag attachments['mail.png'].url %>   

これで認証メールに画像を表示させる事ができるようになりました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした