Dev .

在前端开发或者写作时，占位图（Placeholder Image） 是必不可少的工具。它们能帮助我们快速测试布局、响应式设计和图片比例。很多人可能用过 Lorem Picsum ，但这些工具大多提供的是风景图或者纯色方块，看久了难免单调。

于是，我自己做了一个有趣的小工具 —— 推妹子占位图生成服务 🎉。

功能亮点

这个服务提供了多种类型的占位图，非常适合开发者和设计师：

1. 默认美女图片占位图

默认情况下，拿来即用。要获取下面一样的占位图也十分简单，只需一行代码，即可获取一张随机美女图片：

1

<img src="https://tuimeizi.cn/mm/400x250" alt="美女占位图" />

这里的 400x250 表示宽度和高度，你可以替换成任何需要的尺寸，当然，尺寸信息 400x250 是会渲染到图片上的，方便查看。

示例：

• https://tuimeizi.cn/mm/300x300 → 300x300 正方形美女图
• https://tuimeizi.cn/mm/300x500?text=Hello → 带自定义文字的美女图

2. 不带尺寸文本的美女图片占位图

但是有些情况下，我们可能不想带上图片的尺寸信息，只是想单纯的展示漂亮女生的照片，那你可以这样做：

1

<img src="https://tuimeizi.cn/pure/200x300" alt="不带尺寸信息的图片" />

示例：

• https://tuimeizi.cn/pure/300x300 → 300x300 无尺寸信息美女图
• https://tuimeizi.cn/pure/800x400?text=Hello → 也是支持自定义文本

3. 纯色背景占位图

如果你只需要一个简洁的纯色占位图，可以使用：

1

<img src="https://tuimeizi.cn/color/250x400" alt="纯色占位图" />

甚至可以自定义颜色，例如：

1

<img src="https://tuimeizi.cn/ff6b6b/250x400" alt="自定义颜色占位图" />

上面的例子会生成一个 #ff6b6b 的红色图片，非常适合测试配色方案。

3. 支持文字叠加

无论是美女图还是纯色图，你都可以加上 text 参数，在图片上显示自定义文字（最多 12 个字符）：

1
2

<img src="https://tuimeizi.cn/mm/250x400?text=Hello" alt="带文字的美女图" />
<img src="https://tuimeizi.cn/ff6b6b/250x400?text=Demo" alt="带文字的纯色图" />

这样就能快速生成带有提示文字的占位图，调试更加直观。

使用场景

• 前端开发：测试图片比例、响应式布局。
• 设计稿展示：快速填充素材，效果更真实。
• 写博客/教程：随手添加图片，不用再找素材。
• UI Demo：加上 text 参数还能标注位置或提示信息。

在线体验

👉 推妹子占位图生成服务

赶快试试吧，把它收藏到你的开发工具箱，下次做项目时就能快速调用啦 🚀。