21
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

テーマ

あとで作る画像をとりあえず仮で速攻作る - @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

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"
21
20
2

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
21
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?