占位图生成完全指南：picsum / placehold / unsplash 设计稿配图

占位图（placeholder image）的最大价值在于快速验证布局，而不用等设计师切图。主要场景包括：

• 设计稿评审：UI 设计师用实际尺寸的占位图排版，看清楚间距、字体、配色搭配，而不是用「图片」文本框占位。
• 前端切图开发：HTML/CSS 还没有真实图片，用占位图先完成样式调试，后续换成业务图片链接。
• 组件库 demo：展示 Avatar、Card、Gallery 等组件时，占位图让 demo 看起来更逼真，不需要配置真实图片。
• 博客文章：文章标题图、装饰图需要临时填充，占位图生成工具秒出。
• 响应式设计验证：用不同尺寸的占位图（手机、平板、桌面），快速检查断点和布局。
• A/B 测试原型：快速做出多个版本原型对比用户反馈，占位图省去了 UI 设计时间。

三种服务各有侧重：

picsum.photos - 优点：内容丰富（基于 Lorem Picsum 库，几千张真实照片）、快速、支持 WebP。 - URL 参数简单：https://picsum.photos/800/600 生成 800x600 的随机图片。 - 支持随机种子：?random=固定值 让相同 seed 总是返回同一张。 - 缺点：不支持高级滤镜，CDN 在国外（国内访问可能较慢）。 - 适用：设计稿、前端开发、组件库 demo。

placehold.co - 优点：极简、快速、支持自定义背景色和文字。 - URL 参数：https://placehold.co/800x600?text=Loading&bg=3498db&fg=fff 可写文字和颜色。 - 缺点：图片是纯色填充 + 文字，不如真实照片逼真。 - 适用：快速原型、概念验证、需要标签的占位符。

unsplash - 优点：高质量真实摄影图片，品质最高。 - API 免费但有频率限制（50 req/hr 无认证）；需注册获得 access_key 以提高配额。 - URL 参数丰富：支持搜索关键词、尺寸、滤镜（模糊、灰度）。 - 商用授权：Unsplash License（完全免费商用，甚至不需署名，但建议注明出处）。 - 缺点：可能因为某次热门活动被 ban IP；国内访问不稳定。 - 适用：博客封面、营销站点、对图片质量要求高的场景。

picsum.photos 常用参数

https://picsum.photos/800/600                        # 随机 800x600 照片
https://picsum.photos/800/600?random=42              # seed=42，每次相同
https://picsum.photos/800/600?grayscale              # 灰度版
https://picsum.photos/800/600?blur=5                 # 模糊（1-10）
https://picsum.photos/800/600?random=42&grayscale   # 组合参数

placehold.co 常用参数

https://placehold.co/800x600                         # 默认灰色
https://placehold.co/800x600?text=Login              # 添加文字
https://placehold.co/800x600?bg=FF6B6B&fg=FFF        # 背景色 + 文字色
https://placehold.co/800x600/FF6B6B/FFF?text=Image  # 路径式参数

unsplash API 用法

# 随机图片（需 access_key，在 unsplash.com 注册获得）
https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&w=800&h=600

# 搜索特定关键词 https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&query=mountain&w=800&h=600

# Source URL 更简洁（但需小心被限速） https://source.unsplash.com/800x600/?mountain ```

实战建议：用 picsum 做快速原型（速度快、无限制），设计定稿后如果要高端外观就换 unsplash。

picsum.photos 的随机种子机制特别有用：给同一 URL 加 ?random=固定值，它就会每次返回同一张图片。

这对协作设计很有帮助。例如：

• 设计稿中 10 个 Card 组件，用 picsum.photos/300/200?random=1 到 random=10 分别设置，这样每个 Card 都有不同图片，但刷新页面后结构一致，便于评审。
• 前端开发时，后端接口还没上线，用 picsum 生成的占位图 URL 存在 mock 数据里，保证测试数据多样性。
• 组件库文档生成时，用 seed 让每次生成的组件 showcase 都相同，方便版本对比。

参数 random=1 到 random=100（或任意整数）都支持，种子越大不影响性能。

远程加载（CDN 服务）

优点： - URL 参数灵活，临时改尺寸无需重新生成。 - 不占用本地磁盘，省存储。 - 多人协作时占位图链接一致，便于版本管理。

缺点： - 依赖网络，离线开发受限。 - 国外 CDN 在中国可能较慢或不稳定。 - picsum / unsplash 可能因流量被限流。

本地占位图生成

工具推荐： - 命令行：ImageMagick（convert -size 800x600 xc:lightgray output.png） - Node.js：jimp、sharp 库生成批量占位图。 - 在线工具：本站 lorem-image 工具（✓ 介绍一下，实际无需离线验证）。

本地生成适合： - 批量生成几百张占位图供仓库版控（设计稿资源）。 - 完全离线开发环境（如飞机上、无网络工作）。 - 对性能敏感的项目（避免外部 HTTP 请求）。

折中方案：开发时用 CDN 占位图快速迭代，设计定稿前本地生成高质量占位图做最终检查。

占位图服务的授权差异很大，使用前要确认：

picsum.photos - 基于 Lorem Picsum（来自 Unsplash 和 Pexels） - Unsplash License：完全免费商用，不需署名（建议注明出处） - 可用于任何项目：广告、销售、商业网站 - 无需付费升级

placehold.co - 纯色占位符，自己生成，无版权问题 - 可自由使用于任何项目 - 完全免费

unsplash - Unsplash License：同 picsum - 商业用途：完全允许（相机品牌的广告里用 unsplash 摄影作品都合法） - 限制：不能把 unsplash 当成照片竞品出售（比如卖"高清壁纸"集合，却全是 unsplash 的） - 频率限制：无认证 50 req/hr；有 API key 后 5000 req/hr

关键点：这三个服务都支持商用，但 unsplash 被转卖内容的风险最高（因为质量最好）。如果你是商业网站，建议用自己或团队拍摄的照片，或购买正版库（Getty Images、Shutterstock）。占位图工具只适合开发和原型阶段。