Back

Web 开发者必备的 5 大图片占位符服务

OpenReplay Team OpenReplay Team

Dec 5, 2025 · 2 min read

Web 开发者必备的 5 大图片占位符服务

你正在构建原型,设计系统需要模拟图片,于是你想用那个已经用了多年的占位符 URL——结果发现它已经失效、速度缓慢,或者在 2025 年还在提供 HTTP 服务。这种情况发生的频率比你想象的要高。

许多 2010 年代初期流行的占位符服务已经变得不可靠或完全停止运作。如果你正在寻找现代化、基于 CDN 的占位符图片服务,并且能在现代前端工作流中正常运行,以下五个服务值得了解。

核心要点

  • 优先选择支持 HTTPS、CDN 分发且积极维护的占位符服务,以避免图片损坏和安全警告。
  • 使用种子 URL(如 Lorem Picsum 的 seed 参数)在开发期间确保页面加载时模拟图片的一致性。
  • 在部署到生产环境之前,将所有占位符图片替换为真实图片或自托管资源。
  • 使用外部占位符服务时,记得更新你的 Content-Security-Policy 头。

什么是生产就绪的占位符服务

在深入了解具体服务之前,以下是为 Web 应用选择图片占位符 API 时需要评估的要点:

  • 仅 HTTPS:混合内容警告会破坏你的网站
  • CDN/边缘分发:全球范围内的快速响应时间
  • 积极维护:检查最近的提交或更新
  • 清晰的文档:URL 模式应该是可预测的
  • 现代格式支持:WebP、AVIF 或 SVG 选项

避免使用多年未更新或缺乏 HTTPS 支持的服务。你在开发期间使用的前端图片模拟数据不应该成为负担。

2025 年五个可靠的占位符服务

1. Placehold.co

Placehold.co 生成简单的彩色方块,可选文本——经典的占位符风格,做得恰到好处。

<img src="https://placehold.co/600x400" alt="Placeholder">
<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
<img src="https://placehold.co/600x400.webp" alt="WebP format">

主要特性包括 WebP 支持、自定义字体、URL 中的十六进制颜色和边框选项。它速度快且积极维护——是现已不可靠的 via.placeholder.com 的可靠替代品。

2. Lorem Picsum

Lorem Picsum 提供来自 Unsplash 的真实照片,非常适合制作逼真的原型。

<img src="https://picsum.photos/800/600" alt="Random photo">
<img src="https://picsum.photos/seed/product/400/300" alt="Consistent image">
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

seed 参数确保你在页面加载时获得相同的图片——在开发期间需要一致的前端图片模拟数据时非常有用。无需署名。

3. DummyImage

DummyImage 为基于文本的占位符提供广泛的自定义选项,包括常见广告尺寸和屏幕比例的预设尺寸。

<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

当你需要特定宽高比或行业标准尺寸时,这个服务特别有用。

4. placeholders.dev

placeholders.dev 运行在 Cloudflare Workers 上,从边缘节点提供 SVG 占位符,延迟极低。

<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

纯 SVG 方式意味着在任何尺寸下都能清晰渲染,但如果你需要光栅格式,则需要在其他地方寻找。

5. DiceBear(用于头像)

DiceBear 生成确定性的头像占位符——相同的种子总是产生相同的头像。

<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=user@example.com" alt="User avatar">

提供超过二十种风格。这个服务非常适合需要一致占位符头像的用户个人资料系统。

实际考虑因素

性能:不要在生产环境中频繁调用第三方 API。在开发期间使用占位符,然后在部署前将它们替换为真实图片或自托管资源。

CSP 头:外部占位符服务需要更新你的 Content-Security-Policy:

Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

许可:基于照片的服务(如 Lorem Picsum)使用 Unsplash 图片(免费,大多数情况下无需署名)。商业项目务必验证条款。

本地替代方案:对于离线开发或隐私敏感项目,考虑使用 Canvas 或 SVG 在客户端生成占位符,或运行简单的本地服务。

选择合适的服务

需求最佳选择
简单的彩色方块Placehold.co
逼真的照片Lorem Picsum
特定尺寸/比例DummyImage
边缘性能、SVGplaceholders.dev
用户头像DiceBear

顶级图片占位符服务具有共同特点:积极维护、HTTPS、CDN 分发和清晰的文档。在评估任何服务时,检查其 GitHub 活动并测试目标区域的响应时间。

结论

选择满足你需求的最简单选项。在生产环境前替换占位符。并收藏备选方案——即使是可靠的服务也偶尔会宕机。通过选择积极维护、支持 HTTPS 和 CDN 分发的服务,你将避免图片损坏干扰开发工作流的挫败感。

常见问题

不可以,占位符服务仅用于开发和原型设计。它们可能有速率限制、偶尔的停机时间或在高负载下的性能问题。在部署到生产环境之前,务必将占位符替换为真实图片或自托管资源。

许多 2010 年代初期的占位符服务是副业项目,随着时间推移失去了维护。域名过期、服务器下线,或服务放弃 HTTPS 支持。这就是为什么选择有近期 GitHub 活动的积极维护服务很重要。

使用支持种子参数的服务。Lorem Picsum 允许你在 URL 路径中添加种子值,DiceBear 使用种子查询参数。相同的种子将始终返回相同的图片,确保开发期间页面加载的一致性。

是的,如果你的网站使用 Content-Security-Policy 头,你必须将占位符服务域添加到 img-src 指令中。否则,浏览器会阻止外部图片。记得在用生产资源替换占位符时删除这些条目。

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..

OpenReplay

More articles from OpenReplay Blog