More than 1 year has passed since last update.
@mnishiguchi(Masatoshi Nishiguchi)in👁 Image
fukuoka.ex：福岡Elixirコミュ
fukuoka.ex：福岡Elixirコミュ
仮の画像の作る
21
Last updated at Posted at 2015-08-21
テーマ
『あとで作る画像をとりあえず仮で速攻作る』 - @akicho8
placeholder.com
-
https://via.placeholder.com/[画像サイズ]で必要なサイズの仮画像を取り寄せられる。
使用例
画像サイズを指定。
<img src="https://via.placeholder.com/350x150">
さらに背景色、文字色、表示したい文も指定できる。
<img src="https://via.placeholder.com/350x150/8ad5f0/08088A?text=Hello+world!">
ImageMagick
- ターミナルで
convertコマンドにより、ダミー画像ファイルを作ることが可能。
使用例
$ convert -background '#ccc' -fill '#555' -size 350x150 -gravity center -font Helvetica -pointsize 32 label:"Hello world\!" temporary.png
Rails用ヘルパーメソッド - placehold_img_tag
- コーディングの練習を兼ねて作成。
- placeholder.comのラッパー。
/app/helpers/application_helper.rb
def placehold_img_tag(options={})
opts = { dimension: "350x150", background_color: "ccc", text_color: "555", text: "" }.merge(options)
image_tag("https://via.placeholder.com/#{opts[:dimension]}/#{opts[:background_color]}/#{opts[:text_color]}?text=#{opts[:text].tr(" ", "+")}")
end
使用例
index.html.haml
= placehold_img_tag dimension: "600x450", background_color: "abc", text_color: "567", text: "Hello world"
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme