LoginSignup
2
2

More than 5 years have passed since last update.

imgタグのsrcにbase64の画像を使う(hamlでのサンプル付き)

Posted at

base64にエンコードしたデータをDBに持たせると、画像の管理がすこぶる楽ちんになるので好きです。

そんなやり方は邪道だ!というご意見ご感想もお待ちしております。

記法

hoge.each do |item|
    %img{:src => "data:image/png;base64,#{item.image}",:alt => "icon"}/
end

そもそも画像をどこで管理するか問題

皆さんお気づきかと思いますが、上記のコードは、item.imageにbase64でエンコードしたデータを格納している想定で書いています(要は画像データをDBに持たせている)。

んで、画像はバイナリじゃなくて画像置き場(image配下とかS3とか)に持たせるべきだろ!という意見があると思います。僕もそう思います。でも何でもかんでもその思想に則る必要はなくて、DB管理の方が何かと都合がいい場合も多いですよね。

僕は以下の場合、DBで管理しても良いのではないかと思っています。

  • 画像の容量をアプリ側でコントロール出来る(小さめの画像、etc:アイコン)
  • 定常的に登録されるような画像ではない(ユーザー毎、マスターデータ毎)

逆に、以下のようなパターンは、ストレージで保管すべきだと思います。

  • 画像の容量をアプリ側でコントロール出来ない(大きい画像、etc:写真)
  • 定常的に画像が投稿される(画像投稿サイト、ブログ)

DB管理だと、ActiveRecordの恩恵にも授かれるし、何より管理者が管理しやすいことが利点としてあげられます。なので、こういうケースにおいては積極的にbase64でエンコードしたデータをblob型のカラムにぶん投げるやり方でもいいんじゃないでしょうか。

おまけ:画像データをbase64にエンコードする方法

WEBツールでもchromeでも出来ますが、コマンドラインでも一発で出来ます。

$ base64 hoge.png
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2