图片占位符自动生成器及 API
该小工具可通过配置宽度、高度、文本、颜色、字体及字体大小，可自动生成 SVG 格式的占位符图片。在实际工作场景中，可实现如下需求。
懒加载时，图片的加载中占位符图片:
随机头像:
图片占位符自动生成
使用说明
配置占位符参数
通过页面上的控制面板，可以自定义以下参数：
- 宽度和高度：设置占位符图片的尺寸，单位为像素
- 显示文本：自定义图片上展示的文字，默认为尺寸标注（如
800×200） - 背景色和文字色：通过颜色选择器设定配色方案
- 字体和字号：调整文字的字体和大小
调整参数后，预览区域会实时更新生成的占位符图片。
使用生成的 SVG
生成的占位符为 SVG 格式，可以通过以下方式使用：
- 直接下载：将 SVG 文件保存到本地，在项目中引用
- 复制代码：复制 SVG 源码，直接嵌入 HTML 中
- 使用 API 链接：通过 URL 直接引用，无需保存文件
API URL 直接嵌入
工具提供 API 接口，可以通过 URL 参数动态生成占位符图片，方便在代码中直接使用：
https://devtool.tech/api/placeholder/{宽度}/{高度}?text=文本&bgColor=背景色&color=文字色
例如：
<img src="https://devtool.tech/api/placeholder/800/200?text=Loading…&bgColor=%23efefef" />
在 Markdown 中同样可以直接引用：
常见使用场景
- 懒加载占位：在图片加载完成前显示一张灰色占位图，避免页面布局抖动
- 默认头像：为未设置头像的用户生成带首字母的彩色头像
- UI 原型设计：在设计稿或前端开发中快速填充图片区域，专注于布局调试
- 文档演示：在技术文档中用占位图代替实际截图，减小文档体积
API
$ https://devtool.tech/api/placeholder/[width]/[height]?text=[文字]&color=[文本颜色]&bgColor=[背景颜色]
# 示例
$ curl https://devtool.tech/api/placeholder/800/200
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200" viewBox="0 0 800 200">
<rect fill="#ddd" width="800" height="200"/>
<text fill="#555" font-family="monospace" dy="12" font-size="50" x="50%" y="50%" text-anchor="middle">800×200</text>
</svg>
常见问题
Q: 生成的占位符图片是什么格式？
本工具生成的占位符图片默认为 PNG 格式。PNG 是一种无损压缩的图片格式，支持透明背景，适合用于 UI 设计稿和网页开发中的占位展示。生成的图片通过 Canvas API 在浏览器端实时绘制，你可以直接下载使用或复制图片链接。对于需要更小文件体积的场景，也可以考虑使用 SVG 占位符方案作为替代。
Q: 占位符图片可以用于生产环境吗？
占位符图片主要设计用于开发和设计阶段，作为真实图片加载前的临时替代。在原型设计、UI 调试、文档编写等场景下非常实用。虽然技术上可以在生产环境中使用，但不建议这样做——生产环境应使用真实内容或专门的图片占位服务。占位符图片的作用是帮助开发者快速搭建页面布局和验证视觉效果，确认布局无误后应替换为正式素材。
Q: 可以自定义占位符的样式吗？
可以。本工具支持自定义占位符图片的多项属性，包括宽度、高度、背景颜色、文字颜色以及显示的文字内容。你可以根据项目需要调整尺寸以匹配实际的图片区域大小，设置与设计稿一致的配色方案，还可以在图片上显示尺寸标注或自定义说明文字。这些参数可以灵活组合，满足不同场景下的占位需求。