3
1

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.

URLを指定してダミー画像を表示できるサービス

Last updated at Posted at 2023-10-06

🌻URLを指定してダミー画像を表示するサービス

💡Lorem Picsum
https://picsum.photos/

<img src="https://picsum.photos/200/300">

こうやって指定するだけで、👇のようにダミー画像が表示できます!

・サイズ指定できます!
・ランダム表示できます!
・特定の画像を表示することもできます!
・グレースケール、ぼかしもできます!
・おしゃれな写真がたくさん!

めちゃ便利!!

これで、ダミー画像を表示するとき

・どこかで良い感じの画像を探してきて
・ダウンロードして
・正しいフォルダに配置して
・パス指定して
 (パス間違えて表示されないまでセット)
・めんどくさーーーーい!!

となるのを防げます!!

使い方

サイズ指定、ランダム画像

<img src="https://picsum.photos/200/300">

https://picsum.photos/(幅)/(高さ)

→「https://picsum.photos/」に続けて、幅と高さを指定しよう!

サイズ指定(正方形)、ランダム画像

<img src="https://picsum.photos/200">

https://picsum.photos/(一辺の長さ)

→「https://picsum.photos/」に続けて、一辺の長さを指定しよう!

画像ID指定

<img src="https://picsum.photos/id/237/200/300">

https://picsum.photos/id/(画像ID)/(幅)/(高さ)
https://picsum.photos/id/(画像ID)/(一辺の長さ)

→「https://picsum.photos/id/」に続けて、画像のID、サイズを指定しよう!

画像のIDは👇から調べられます。
https://picsum.photos/images

グレースケール

<img src="https://picsum.photos/200?grayscale">

https://picsum.photos/(お好みの指定)?grayscale

→末尾に「?grayscale」を付けよう!

ぼかし

<img src="https://picsum.photos/200?blur">

https://picsum.photos/(お好みの指定)?blur

→末尾に「?blur」を付けよう!

試してみてね!

3
1
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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?