前端干货之随机图库 Lorem Picsum

你还在为找不到图片而烦恼吗？

你可以尝试着刷新页面！或者在这里体验

今天给大家推荐一个免费的图片库 Lorem Picsum，简单好用

获取指定大小的随机图片

---

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd4c047e28e741158f5df8cf522393d0~tplv-k3u1fbpfcp-zoom-1.image

这样你就能得到一张宽度为200，高度为300的随机图片

如果你想要获得正方形图片，只需要如下代码

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

这样你就能得到一张宽度为200，高度为200的随机正方形图片

获取指定id的图片

---

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70f15c6d283b4032942ef661b1d61eab~tplv-k3u1fbpfcp-zoom-1.image

所有图片列表

静态随机图片

---

每次根据种子获得相同的随机图像，方法是在URL开头添加/seed/ {seed}。

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80e5bde1da5247d0a3e5b312c83dfa49~tplv-k3u1fbpfcp-zoom-1.image

灰度图片

---

只需要在链接末尾添加?grayscale即可

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3bd28ba365be4c71b020eada420e02b7~tplv-k3u1fbpfcp-zoom-1.image

模糊图片

---

通过附加?blur到url的末尾获得模糊图像。

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e90614f355be4f5299593692c2d3af13~tplv-k3u1fbpfcp-zoom-1.image

可以通过提供介于1和10之间的数字来调整模糊量。

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad6441675f554b629bdc79339a7cbecc~tplv-k3u1fbpfcp-zoom-1.image

高级用法

---

您可以结合使用以上任何选项。

例如，要获得灰度和模糊的特定图像。

//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94f24535e515413fbb9a3ce90f8ab45b~tplv-k3u1fbpfcp-zoom-1.image

要在浏览器中请求多张相同大小的图像，请添加random查询参数以防止图像被缓存：

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

如果您需要文件结尾，则可以添加.jpg到url的结尾。

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

要获取WebP格式的图像，可以将其添加.webp到URL的末尾。

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

列出图片

---

使用/v2/list端点获取图像列表。

https://picsum.photos/v2/list

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

默认情况下，该API每页将返回30个项目。

要请求另一个页面，请使用?page参数。

要更改每页的项目数量，请使用?limit参数。

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

该Link头包括关于下一首/上页分页信息

图像细节

---

使用/id/{id}/info端点获取有关特定图像的信息。

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

您可以通过查看Picsum-ID标题或User CommentEXIF元数据中的字段来查找图像的ID 。

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