ランダムで画像を取得し表示させることができるサイト「Lorem Picsum」【URLでimg取得】

Web製作でサンプルとして画像を入れておきたい時、表示させる画像を毎回ランダムで表示させたい。

画像をローカルにダウンロードせずに、URLで画像を取得し表示させることができるサイト「Lorem Picsum」を紹介します。

▪使用例CodePen⇩

See the Pen 毎回ランダムで画像を取得し表示 ― Lorem Picsum by pull-design (@design90806871) on CodePen.

Lorem Picsumについて
Lorem Picsumの使い方
画像を使ったスライド機能

Lorem Picsumについて

フォトサービスで「Unsplash」の画像を無料で使用できるサイトです。

画像をローカルにダウンロードし使用することもできますが、このサイトの醍醐味はURLを入力して画像取得しWEB上に表示させることができるところです。

▪サイトは下記URLより⇩

➡ Unsplash

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

➡ Lorem Picsum

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">