标签:模糊效果 引入 插件 json格式 scale contain 基本使用 htm exif
文章声明:
- 本文基于此文章改编:前端干货之随机图库 Lorem Picsum
- 基本就是官网文档的翻译,不过一般不会留神去看
- 可以关注官网,说不定后续还会出些什么骚操作呢(2020-7-25写的此文章)
- 主角 Lorem Picsum 官网:https://picsum.photos/
- 原文(官网)直接就写到了我想要写的样子,我就稍微整理了下
这个网站获取图片的功能十分强大,你可以在 img 标签的 src 中引入下面规则的网址,或者背景图片中应用
透过本文,你可以通过简单的url拼接或者参数
https://picsum.photos/200/300
https://picsum.photos/200
// 等同于 https://picsum.photos/200/200
#数字
,就是图片的 id
)例如下面这张图片的 id 是 237,我们就可以通过 https://picsum.photos/id/237/宽度/高度
来取到这张图片
https://picsum.photos/id/106/400/300
每次根据种子获得相同的随机图像,方法是在URL开头添加/seed/ {seed}
/seed/随便写/
它的图片就会不一样,这个值一样它的图片就会一样https://picsum.photos/seed/picsum/200
只需要在链接末尾添加?grayscale
即可
https://picsum.photos/200/300?grayscale
?blur
到url的末尾获得模糊图像https://picsum.photos/200/200/?blur
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
到url的结尾。
https://picsum.photos/200/300.jpg
要获取WebP格式的图像,可以将其添加.webp
到URL的末尾。
https://picsum.photos/200/300.webp
使用/v2/list
端点获取图像详细信息数组
?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
您可以通过查看(没看懂,json里不是直接有吗)Picsum-ID
标题或User Comment
EXIF元数据中的字段来查找图像的ID 。
{
"id": "0",
"author": "Alejandro Escamilla",
"width": 5616,
"height": 3744,
"url": "https://unsplash.com/...",
"download_url": "https://picsum.photos/..."
}
如果搭配上mockjs,秒啊~
前端干货之随机图库 Lorem Picsum(只需要按规则写个网址就行,不需要集成任何插件环境)
标签:模糊效果 引入 插件 json格式 scale contain 基本使用 htm exif
原文地址:https://www.cnblogs.com/suwanbin/p/13376140.html