ウェブ

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

Lorem Picsum

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

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

▪使用例CodePen⇩

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

Lorem Picsumについて

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

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

▪サイトは下記URLより⇩

➡ Unsplash

Unsplash
Unsplash

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

➡ Lorem Picsum

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

画像を使ったスライド機能

画像スライダーを実装する場合は、外部のプラグインを使用することをお勧めします。当サイトでは「slick」「Swiper」の導入についての記事もありますので、自身のあったスライダーを実装してみてください。

slickを使ったスライダーをコピペで簡単実装できるようまとめました。

slickアイキャッチ画像
Slick/全画面でふわっと切り替えスライドショー【jQuery】スライダープラグイン【slick】を使って全画面スライドショーを実装。「slickの実装方法」と「slickのカスタマイズ」について解説していきます。画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。コピーペーストで実装可能です。...

Swiperを使ったスライダーをコピペで簡単実装できるようまとめました。

swiper
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。...