前端-随机图库 Lorem Picsum

阿伯兹德
2,799 阅读1分钟

一、地址

1、网址：picsum.photos/

二、用法

1、随机获取一张宽/高为200的图片： <img src="https://picsum.photos/200"/> || <img src="https://picsum.photos/200/200"/>

image.png

2、、随机获取一张宽200，高为300的图片： <img src="https://picsum.photos/200/300"/>

image.png

3、获取指定id的图片： <img src="https://picsum.photos/id/200/200"/>

image.png

<img src="https://picsum.photos/id/200/200/300"/>

image.png

4、随机静态图片： 通过在url的开头添加/seed/{seed}，每次都可以基于{seed}获得相同的随机图像。 <img src="https://picsum.photos/seed/picsum/200/300"/> <img src="https://picsum.photos/seed/任何值/200/300"/>

image.png

5、灰度图片： <img src="https://picsum.photos/200?grayscale"/>

image.png

6、模糊图片（可以通过提供介于1和10之间的数字来调整模糊量） <img src="https://picsum.photos/200?blur"/>

image.png

<img src="https://picsum.photos/200?blur=1"/>

image.png

三、进阶用法（用法任意结合）

1、获得灰度和模糊的特定图像 <img src="https://picsum.photos/id/200/200?grayscale&blur=1"/>

image.png

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

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

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

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

<img src="https://picsum.photos/200.jpg">

四、分页获取网站中图片信息(宽高、地址，json格式)

1、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参数。

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

五、 获取指定图片信息

1、使用/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/..."
}
avatar
文章
阅读
粉丝