随机图库Lorem Picsum

最新推荐文章于 2024-09-05 08:13:22 发布

笑看、人世间@

最新推荐文章于 2024-09-05 08:13:22 发布

阅读量635

点赞数

文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_48353638/article/details/132202170

版权

文章介绍了Picsum、Unsplash等网站提供的随机图片API功能，包括获取指定大小、ID、模糊度、灰度的图片，以及高级用法如混合参数、多张图片和指定格式。此外，还介绍了其他类似服务如Placekitten和LoremFlickr。

摘要由CSDN通过智能技术生成

前言

这个网站获取图片的功能十分强大，你可以在 img 标签的 src 中引入下面规则的网址，或者背景图片中应用

获得随机图片
获得指定大小图片
获得指定模糊度图片(或是纯灰色图片)
获取到指定图片(固定的图片)

基本用法

1. 获取指定大小的随机图片

长方形图片：

https://picsum.photos/100/200

在这里插入图片描述
正方形图片：

https://picsum.photos/200

相当于

https://picsum.photos/200/200

在这里插入图片描述

2. 获取指定ID的图片

https://picsum.photos/id/123/200/500

在这里插入图片描述

3. 静态随机图片

每次根据种子获得相同的随机图像，方法是在参数前面添加/seed/{seed}，seed为图片的种子，例如test1。

https://picsum.photos/seed/test1/300

在这里插入图片描述

4. 灰度图片

要获取灰度图片，需要添加以下参数：grayscale

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

在这里插入图片描述

5. 模糊图片

要获取模糊图片，需要?blur到url的末尾获得模糊图像。

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

在这里插入图片描述
还能通过提供介于1和10之间的数字来调整模糊量。

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

在这里插入图片描述

6. 高级用法

1. 混合参数

在实际使用中，可以将以上任何选项混合使用。

例如要获得灰度、模糊量为2、ID为999的、边长为200的正方形图像

https://picsum.photos/id/999/200?grayscale&blur=2

在这里插入图片描述

2. 多张图片

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

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

在这里插入图片描述

3. 指定格式

还可以在末尾添加.jpg或.webp等图片扩展名，返回对应格式的图片。

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

4. 列出图片

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

5. 图像细节

https://picsum.photos/id/{id}/info

获取有关特定图像的信息。

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

返回值示例：

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