图片占位符自动生成
宽度
高度
字体大小
文本
背景颜色
文本颜色
文本字体
https://devtool.tech/api/placeholder/800/300

图片占位符自动生成器及 API

该小工具可通过配置宽度、高度、文本、颜色、字体及字体大小,可自动生成 SVG 格式的占位符图片。在实际工作场景中,可实现如下需求。

懒加载时,图片的加载中占位符图片:

Loading 占位符

随机头像:

随机头像

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>