モックを作る時や記事のサムネイルをダミーで入れておきたい時、グレーのシンプルなボックスだと味気ないですよね。
そこでいい感じのお洒落な写真が使えるサイト、 Lorem Picsum(https://picsum.photos/)がおすすめです。
サイトの紹介でも「写真のLorem Ipsumです。」と謳っています。
使い方
サイトに書いてある通りですが、さらっと紹介します。
基本的には、https://picsum.photos/ のURLに表示したい画像の幅(width)と高さ(height)を指定してあげるだけです。
https://picsum.photos/画像の幅/画像の高さ
で、実際に幅と高さを指定したリンクを開くと、いい感じの写真がランダムで表示されます。
https://picsum.photos/200/300
開くたびに画像が変わります(一度開いてパラメータが付いた状態でリロードすると同じ画像)。
幅と高さが同じ正方形であれば幅の指定だけです。
https://picsum.photos/200
下記はHTML内で使用している例。
<img src="https://picsum.photos/200/300" alt="dummy image">
また、こちらのImage Galleryに乗っているIDを指定することで、特定の画像だけを表示することもできる。
/id/{image}
https://picsum.photos/id/1025/200/300
グレースケールやぼかしもパラメーターで設定できます。
https://picsum.photos/200/300?grayscale
https://picsum.photos/200/300/?blur
ぼかしは1〜10で強さを変更できます。
https://picsum.photos/200/300/?blur=2
他にも.jpgや.webpの指定や、キャッシュの設定などパラメーターで細かく調整できます。
あとはなんと言ってもAPIがあること!
JSON大好きなのでVue.jsなどと組み合わせて使うと便利だなと思ってます。
ぜひ!
コメントを残す