前端干货之随机图库 Lorem Picsum

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

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

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

获取指定大小的随机图片


/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg


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

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

/public/upload/046f6797df4b1d2fdf716dcbd17847e3.jpg
//等同于 /public/upload/046f6797df4b1d2fdf716dcbd17847e3.jpg/200

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

获取指定id的图片


/public/upload/6a18dfa6446bd0915cfb1d5b352626aa.jpg

所有图片列表

静态随机图片


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

/public/upload/44a8afff5d968372ff9e759b519cc92d.jpg

灰度图片


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

/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg?grayscale

模糊图片


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

/public/upload/046f6797df4b1d2fdf716dcbd17847e3.jpg/200/?blur

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

/public/upload/046f6797df4b1d2fdf716dcbd17847e3.jpg?blur=2

高级用法


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

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

/public/upload/44a8afff5d968372ff9e759b519cc92d.jpg?grayscale&blur=2

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

<img src="/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg?random=1">
<img src="/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg?random=2">

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

/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg.jpg

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

/public/upload/d76ac11713f09b4f82c50f062d0a13a7.jpg.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/..."
}
原文链接:segmentfault.com

上一篇:2020年的失败跳槽体验
下一篇:🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

相关推荐

  • react-lorem-component

    A component for React that renders paragraph or list item tags full of lorem ipsum placeholder text ...

    2 个月前
  • posthtml-lorem

    Add lorem ipsum placeholder text to any document Lorem Lorem lets you easily add lorem ipsum plac...

    1 年前
  • loremipstream

    A configurable Readable Stream that generates Lorem ipsum. Useful for stream testing. node-loremips...

    2 年前
  • lorem-ipsum

    Generates passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, ...

    2 年前
  • is there any function like string.isnullorempty() in javascript

    uzay95提出了一个问题:is there any function like string.isnullorempty() in javascript,或许与您遇到的问题类似。

    3 年前
  • cspell-dict-lorem-ipsum

    Lorem-ipsum dictionary for cspell. Cspell lorem-ipsum Dictionary Lorem-ipsum dictionary for cspell. ...

    4 个月前
  • C # string.isnullorempty JavaScript等效

    Daniele ArmanascoStanley Cup Phil提出了一个问题:C# String.IsNullOrEmpty Javascript equivalent,或许与您遇到的问题类似。

    3 年前
  • @types/lorem-ipsum

    Stub TypeScript definitions entry for lorem-ipsum, which provides its own types definitions This is ...

    4 个月前
  • @jamen/lorem

    Create N bytes of lorem ipsum text. Lorem ipsum Create N bytes of lorem ipsum text. Install npm inst...

    5 个月前
  • @emmetio/lorem

    Transforms parsed Emmet abbreviation node into Lorem Ipsum stub text lorem-transformer Transforms pa...

    5 个月前

官方社区

扫码加入 JavaScript 社区