Picsum.photos

官网:
https://picsum.photos/

https://picsum.photos/

Picsum.photos 是一个非常实用的在线图片生成服务，特别适合开发者和设计师在网页设计中使用占位符图片。

使用种子值的随机图片

1- 基本概念

Picsum.photos 提供了一个简单的 API，可以生成随机图片或指定尺寸的图片。用户只需通过 URL 请求所需的图片，服务会返回相应的图片。

2- 获取随机图片

要获取一张随机图片，可以使用以下格式的 URL：

https://picsum.photos/{宽度}/{高度}

  • 示例：获取一张宽 300 像素、高 200 像素的随机图片：

    <img src="https://picsum.photos/300/200" alt="随机图片">

3- 获取特定尺寸的图片

如果只想要一个正方形的随机图片，可以只指定一个参数：

https://picsum.photos/{尺寸}

  • 示例：获取一张 300x300 像素的随机图片：

    <img src="https://picsum.photos/300" alt="正方形随机图片">

4- 获取特定 ID 的图片

如果希望每次都获取同一张图片，可以通过图片的 ID 来指定。每张图片都有一个唯一的 ID，使用格式如下：

https://picsum.photos/id/{图片ID}/{宽度}/{高度}

  • 示例：获取 ID 为 55 的图片，宽 300 像素，高 200 像素：

    <img src="https://picsum.photos/id/55/300/200" alt="特定图片">

5- 使用种子值获取相同的随机图片

如果希望每次请求都返回相同的随机图片，可以使用种子值。格式如下：

https://picsum.photos/seed/{种子值}/{宽度}/{高度}

  • 示例：

    <img src="https://picsum.photos/seed/123/300/200" alt="使用种子值的随机图片">

6- 获取灰度和模糊效果的图片

你可以通过在 URL 中添加参数来获取不同效果的图片。例如，获取灰度图片：

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

获取模糊效果的图片：

https://picsum.photos/300/200?blur=5

  • 示例：

    <img src="https://picsum.photos/300/200?grayscale" alt="灰度图片">
<img src="https://picsum.photos/300/200?blur=5" alt="模糊图片">

7- 嵌入图片的完整示例

以下是一个完整的 HTML 示例，展示如何在网页中嵌入 Picsum.photos 的图片：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picsum 示例</title>
</head>
<body>
    <h1>随机图片示例</h1>
    <img src="https://picsum.photos/300/200" alt="随机图片">
    <h2>特定 ID 图片</h2>
    <img src="https://picsum.photos/id/55/300/200" alt="特定图片">
    <h2>灰度图片</h2>
    <img src="https://picsum.photos/300/200?grayscale" alt="灰度图片">
    <h2>模糊图片</h2>
    <img src="https://picsum.photos/300/200?blur=5" alt="模糊图片">
</body>
</html>

8- 注意事项

  • 缓存问题：浏览器可能会缓存图片，导致后续请求返回相同的图片。可以在 URL 后添加 ?random 参数来避免这种情况。
  • 图片质量：Picsum.photos 提供的图片质量较高，适合用于网页设计和开发。