如何用 Placeholder pics 的 URL 格式生成占位图片?

Placeholder pics 通过一个纯 URL 规则生成占位图，不需要注册或上传文件：URL 以 /svg/ 开头，后面依次拼接尺寸、背景色、前景色和标签，返回的是一张 SVG 图片。它适合在写 HTML/CSS 原型、设计稿或文档时快速插入一张指定尺寸和颜色的占位图。所有参数都写在 URL 路径里，因此你只要会拼地址就能用。

URL 的基本结构

官方给出的格式顺序是固定的，参数按位置解析，而不是按名字：

/svg/WIDTHxHEIGHT/BACKGROUND/FOREGROUND/LABEL

• 必须以 /svg/ 开头。
• 尺寸用 宽x高 表示，例如 100x100。
• 背景色可以省略，但一旦要设置前景色或标签，就必须先写背景色。
• 标签放在最后一段。

尺寸怎么写

尺寸参数紧跟在 /svg/ 之后，用 x 连接宽和高：

如果只写一个数值，得到的是正方形，这是官方明确说明的行为。

颜色参数：背景在前，前景在后

颜色用 3 位或 6 位十六进制色码表示，不带 #。

背景色

背景色可以是一种颜色，也可以是渐变：

• 单色：/svg/100x100/888888
• 渐变：用两个色码以短横线连接，表示起点色和终点色，例如 START-STOP，如 /svg/100x100/888888-EEEEEE

前景色（文字与边框）

前景色控制图中的文字和边框颜色，同样支持单色或双色：

• 单色：/svg/100x100/888888/EEEEEE
• 双色：两个色码用短横线分隔，格式为 TEXT-BORDER，分别对应文字色和边框色

关键限制：必须先定义背景色，才能设置前景色。也就是说，不能跳过背景色直接写前景色。

标签怎么写

标签是 URL 的最后一段，用来在图上显示一小段文字，方便在原型里区分不同占位图。例如：

/svg/100x100/888888/EEEEEE/My Label

使用标签时有两个前提：

• 前景色和背景色都必须先指定。
• 标签要短，并考虑图片本身的尺寸——图太小的话，文字会显示不下。

一个完整例子

假设你要一张 600×400、浅灰背景、深灰文字、标注为 “Hero” 的占位图：

/svg/600x400/EEEEEE/333333/Hero

拆开看：

• 600x400：尺寸
• EEEEEE：背景色
• 333333：前景文字与边框色
• Hero：标签

把这段路径拼到域名后面，就是可以直接放进 <img src="..."> 的地址。

常见卡点

• 顺序写错：参数按位置解析，背景色、前景色、标签的顺序不能调换。
• 忘了背景色：想设置前景色或标签时，背景色是必填的前置项。
• 色码带了 #：URL 里用的是 3 位或 6 位十六进制字符，不带井号。
• 标签太长：小尺寸图片配长标签会显示不清，标签应保持简短。
• 尺寸只写一个数：这不是错误，但结果会是正方形，而不是你想要的矩形。

适用与不适用

Placeholder pics 返回的是 SVG，体积小、可任意缩放，适合原型、设计稿和文档中的占位需求。官方说明该服务按 “as is” 提供，不对准确性或可访问性作明示或暗示担保。如果你需要的是真实照片占位、需要复杂图形，或需要服务端稳定托管的正式资源，这个纯 URL 方案并不合适。