前端干貨之隨機圖庫 Lorem Picsum（只需要按規則寫個網址就行，不需要集成任何插件環境）

目錄

• 前言
• 基本用法
  • 獲取指定大小的隨機圖片
    • 獲取指定寬高的圖片
    • 獲得指定尺寸的正方形圖片
  • 通過id獲取指定圖片（非隨機）
  • 靜態隨機圖片（隨便寫個值就能獲取到圖片，值一樣，圖片就是一樣的）
  • 灰度圖片（灰色濾鏡處理后的圖片）
  • 模糊圖片（類似虛化的效果）
    • 通過附加?blur到url的末尾獲得模糊圖像
    • 可以通過提供介於1和10之間的數字來調整模糊量。
• 高級用法
  • 請求多張相同大小的隨機圖片
  • 獲取不同格式的圖片（jpg、webp）
  • 分頁獲取網站中圖片信息（寬高、地址，json格式）
    • 獲取指定圖片信息

文章聲明：

• 本文基於此文章改編：前端干貨之隨機圖庫 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 是 106，我們就可以通過 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，秒啊~

• mockjs 基本使用-按指定規則生成隨機測試數據