Web製作でサンプルとして画像を入れておきたい時、表示させる画像を毎回ランダムで表示させたい。
画像をローカルにダウンロードせずに、URLで画像を取得し表示させることができるサイト「Lorem Picsum」を紹介します。
▪使用例CodePen⇩
See the Pen 毎回ランダムで画像を取得し表示 ― Lorem Picsum by pull-design (@design90806871) on CodePen.
Lorem Picsumについて
フォトサービスで「Unsplash」の画像を無料で使用できるサイトです。
画像をローカルにダウンロードし使用することもできますが、このサイトの醍醐味はURLを入力して画像取得しWEB上に表示させることができるところです。
▪サイトは下記URLより⇩

▪サイトの使用マニュアル⇩

Lorem Picsumの使い方
基本的にサイトのURL・表示させたい画像・画像の横幅(width)・画像の縦高さ(height)を記述して使用します。
▪基本的な記述方法
https://picsum.photos/横幅/縦幅
▪正方形
https://picsum.photos/幅
ランダム画像取得
ランダムで画像表示させる場合は下記のように記述。
<img src="https://picsum.photos/400/300">
指定画像取得
指定した画像を表示させる記述になり、サイトURL/id/番号/幅/高さで指定。
<!-- 指定画像取得 https://picsum.photos/images -->
<img src="https://picsum.photos/id/1/400/300">
<!-- 指定画像取得 https://picsum.photos/images -->
<img src="https://picsum.photos/id/1024/400/300">
<!-- 指定画像取得 https://picsum.photos/images -->
<img src="https://picsum.photos/id/101/400/300">
画像の指定なしで同じ画像
<img src="https://picsum.photos/seed/picsum/400/300">
白黒グレースケール
<img src="https://picsum.photos/400/300?grayscale">
ぼかし blur=1~10
画像を数値1~10の値でぼかしを入れます。
<img src="https://picsum.photos/400/300/?blur=10">
白黒+ぼかし blur=1~10
白黒画像を数値1~10の値でぼかしを入れます。
<img src="https://picsum.photos/id/870/400/300?grayscale&blur=10">
画像フォーマット(拡張子指定).jpg
拡張子を.jpgで表示。
<img src="https://picsum.photos/400/300.jpg">

画像フォーマット(拡張子指定).webp
拡張子を.webpで表示。
<img src="https://picsum.photos/400/300.webp">

ランダム取得 サイズ/?random=数字
画像を羅列したい場合random=以降の数字を別の数値に指定。
<img src="https://picsum.photos/400?random=1">
<img src="https://picsum.photos/400?random=2">
<img src="https://picsum.photos/400?random=3">
<img src="https://picsum.photos/400?random=4">
<img src="https://picsum.photos/400?random=5">
画像を使ったスライド機能
画像スライダーを実装する場合は、外部のプラグインを使用することをお勧めします。当サイトでは「slick」と「Swiper」の導入についての記事もありますので、自身のあったスライダーを実装してみてください。
▪slickを使ったスライダーをコピペで簡単実装できるようまとめました。
▪Swiperを使ったスライダーをコピペで簡単実装できるようまとめました。