随机图片

1. 核心 API

• Picsum: https://picsum.photos/800/600
• Unsplash: https://source.unsplash.com/random/800x600

2. 使用方法

type imageObj = {
  apiType: "picsum" | "unsplash" | string, // 图片 API 类型（'picsum' 或 'unsplash'）
  imgElement?: HTMLElement, // 图片元素
  imgWidth?: number, // 图片宽度
  imgHeight?: number, // 图片高度
  imgTheme?: string, // 图片主题（仅 Unsplash 支持，多个主题用逗号分隔）
};

/**
 * 获取随机图片
 * @param {string} apiType - 图片 API 类型（'picsum' 或 'unsplash'）
 */
function getRandomImage(iAttr: imageObj = {}) {
  const obj = {
    ...iAttr,
    ...{
      imgWidth: 800,
      imgHeight: 600,
      apiType: "picsum",
      imgTheme: "nature,landscape",
    },
  };

  const { apiType, imgElement, imgWidth, imgHeight, imgTheme } = obj;
  // 获取图片 API 类型  //  apiType = "picsum"
  let imgUrl = "";

  // 根据 API 类型生成 URL
  switch (apiType) {
    case "picsum":
      // Picsum API：支持指定尺寸，随机图片
      imgUrl = `https://picsum.photos/${imgWidth}/${imgHeight}?random=${Math.random()}`;
      break;
    case "unsplash":
      // Unsplash API：支持主题筛选
      const randomSeed = Math.random().toString(36).substring(2, 10);
      imgUrl = `https://source.unsplash.com/random/${imgWidth}x${imgHeight}/?${imgTheme}&seed=${randomSeed}`;
      break;
    default:
      imgUrl = `https://picsum.photos/${imgWidth}/${imgHeight}`;
  }

  if (imgElement) {
    // 加载图片（避免缓存，添加随机参数）
    imgElement.src = imgUrl;

    // 图片加载失败时重试
    imgElement.onerror = () => {
      getRandomImage(apiType);
    };
  }
  return imgUrl;
}

---

3. Picsum

Picsum Photos 是一个轻量级、无需 API 密钥的免费图片 API

核心用法

1. 基础语法 https://picsum.photos/[宽度]/[高度]
2. 固定图片（通过 ID:Picsum 为每张图片分配了唯一 ID（0-1084），通过 ID 可获取固定图片：） https://picsum.photos/id/[图片ID]/[宽度]/[高度]
3. 随机图片（带种子参数） https://picsum.photos/[宽度]/[高度]?random=[种子值]
4. 图片筛选（类别 / 作者）
   • ?grayscale：返回灰度图片 示例：https://picsum.photos/600/400?grayscale
   • ?blur=[模糊程度]：添加模糊效果（1-10） 示例：https://picsum.photos/600/400?blur=5
   • ?category=[类别]：按类别筛选（如 nature、people、tech 等） 示例：https://picsum.photos/600/400?category=nature
   • 多参数组合：https://picsum.photos/600/400?category=people&grayscale&blur=2

尺寸与裁剪

1. 精确尺寸 直接指定宽度和高度，图片会被拉伸 / 压缩以适应： https://picsum.photos/200/300 // 宽 200px，高 300px
2. 比例裁剪（保持原图比例） 通过 seed 或 ID 结合尺寸，图片会按比例裁剪： https://picsum.photos/id/10/400/400 // 从 ID10 的图片中裁剪 400x400 的正方形区域
3. 动态尺寸适配 支持相对单位（如百分比）或响应式尺寸：

预览
<!-- 在HTML中使用，自适应容器宽度 -->
<img src="https://picsum.photos/100%/400" alt="自适应宽度" />

核心 API 介绍

API 名称	特点	示例 URL
Picsum Photos	稳定、支持指定尺寸 / 图片 ID	https://picsum.photos/800/600
Unsplash Source	高质量图片，支持主题筛选	https://source.unsplash.com/random/800x600

4. Unsplash

限制（免费计划）

• 每小时最多 50 次请求
• 每天最多 5000 次请求
• 禁止批量下载图片或用于壁纸类应用
• 必须在使用图片时注明来源（如 Photo by John Doe on Unsplash）

Unsplash 主题筛选核心用法

通过 https://source.unsplash.com/random/[尺寸]/?[主题关键词] 格式的 URL 筛选主题，支持：

• 单个主题（如 nature 自然）
• 多个主题（用逗号分隔，如 nature,water 自然 + 水）
• 排除主题（用 - 前缀，如 nature,-trees 自然但不含树木）

常用主题关键词参考

• 主题类别 关键词示例
• 自然景观 nature（自然）、mountain（山脉）、ocean（海洋）
• 城市建筑 city（城市）、building（建筑）、street（街道）
• 动物植物 dog（狗）、cat（猫）、flower（花）、forest（森林）
• 抽象 / 纹理 abstract（抽象）、texture（纹理）、pattern（图案）
• 生活方式 coffee（咖啡）、book（书籍）、travel（旅行）