该小工具可通过配置宽度、高度、文本、颜色、字体及字体大小,可自动生成 SVG 格式的占位符图片。在实际工作场景中,可实现如下需求。
懒加载时,图片的加载中占位符图片:
随机头像:
$ 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>