前端乾貨之隨機相簿 Lorem Picsum（只需要按規則寫個網址就行，不需要整合任何外掛環境）

阿新 • • 發佈：2020-07-25

前言
基本用法
高階用法

文章宣告：

本文基於此文章改編：前端乾貨之隨機相簿 Lorem Picsum

基本就是官網文件的翻譯，不過一般不會留神去看

可以關注官網，說不定後續還會出些什麼騷操作呢（2020-7-25寫的此文章）

主角 Lorem Picsum 官網：https://picsum.photos/

原文（官網）直接就寫到了我想要寫的樣子，我就稍微整理了下

前言

這個網站獲取圖片的功能十分強大，你可以在 img 標籤的 src 中引入下面規則的網址，或者背景圖片中應用

亦或是其他你想要用到的情境下
最主要的是網站的圖片質量非常符合我的審美，預期 o(￣▽￣)ｄ
- 反正比我網上找覺得還行的圖片省力得多
- 況且對於每一張圖片都可以指定寬高、模糊度、灰度

透過本文，你可以通過簡單的url拼接或者引數

獲得隨機圖片
獲得指定大小圖片
獲得指定模糊度圖片（亦或是純灰色圖片）
獲取到指定圖片（固定的圖片）

基本用法

獲取指定大小的隨機圖片

獲取指定寬高的圖片

獲取一張寬度為200，高度為300的隨機圖片

https://picsum.photos/200/300

獲得指定尺寸的正方形圖片

獲取一張寬度為200，高度為200的隨機正方形圖片

https://picsum.photos/200
// 等同於 https://picsum.photos/200/200

通過id獲取指定圖片（非隨機）

網站所有圖片列表：https://picsum.photos/images
- 開啟網站後向下滾動，每頁展示一些圖片，有翻頁
- 你可以在所有圖片列表中看看都有哪些圖片，然後選擇自己喜歡的圖片（圖片右下角的 #數字，就是圖片的 id）

例如下面這張圖片的 id 是 237，我們就可以通過 https://picsum.photos/id/237/寬度/高度

來取到這張圖片

https://picsum.photos/id/106/400/300

靜態隨機圖片（隨便寫個值就能獲取到圖片，值一樣，圖片就是一樣的）

每次根據種子獲得相同的隨機影象，方法是在URL開頭新增/seed/ {seed}

說實話，沒太看懂，但是改變 /seed/隨便寫/ 它的圖片就會不一樣，這個值一樣它的圖片就會一樣
沒有去探索，但有點擔憂這種圖片的有效期（更加推薦隨便寫個id）
我的歪腦筋：在寫測試程式碼時，通過改變尺寸來模仿達到縮圖與原圖的效果（如果是後端返回縮圖、原圖列表）

https://picsum.photos/seed/picsum/200

灰度圖片（灰色濾鏡處理後的圖片）

只需要在連結末尾新增?grayscale即可

https://picsum.photos/200/300?grayscale

模糊圖片（類似虛化的效果）

通過附加`?blur`到url的末尾獲得模糊影象

https://picsum.photos/200/200/?blur

可以通過提供介於1和10之間的數字來調整模糊量。

https://picsum.photos/200?blur=2

高階用法

您可以結合使用以上任何選項。

例如，要獲得有灰度和模糊效果的特定圖片

https://picsum.photos/id/1084/536/354?grayscale&blur=2

請求多張相同大小的隨機圖片

要在瀏覽器中請求多張相同大小的隨機圖片，請新增random查詢引數（給不同的值）以防止影象被快取：

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

獲取不同格式的圖片（jpg、webp）

如果您需要檔案結尾，則可以新增.jpg到url的結尾。

https://picsum.photos/200/300.jpg

要獲取WebP格式的影象，可以將其新增.webp到URL的末尾。

https://picsum.photos/200/300.webp

分頁獲取網站中圖片資訊（寬高、地址，json格式）

使用/v2/list端點獲取影象詳細資訊陣列

預設情況下，該API每頁將返回30個圖片的資訊。
- 要請求另一個頁面，請使用?page引數。
- 要更改每頁的專案數量，請使用?limit引數。

https://picsum.photos/v2/list

[
	// 單個圖片資訊舉例
    {
        "id": "0",  // 在本網站的id號
        "author": "Alejandro Escamilla",  // 圖片作者
        "width": 5616,  // 圖片寬高
        "height": 3744,
        "url": "https://unsplash.com/...",  // 圖片來源地址
        "download_url": "https://picsum.photos/..."  // 圖片下載連結
    },
    ....
]

獲取網站每頁100條資料，第二頁的資訊（第101-200條資料）

https://picsum.photos/v2/list?page=2&limit=100

獲取指定圖片資訊

使用/id/{id}/info端點獲取有關特定影象的資訊。

https://picsum.photos/id/0/info

~~您可以通過檢視Picsum-ID標題或User CommentEXIF元資料中的欄位來查詢影象的ID 。~~（沒看懂，json裡不是直接有嗎）

{
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
}

如果搭配上mockjs，秒啊~