直接用标签加第三方url（如https://via.placeholder.com）可快速生成占位图，无需canvas或js库，轻量、兼容性好，适合原型和静态页；注意placehold.it已停服，应使用其镜像via.placeholder.com。
直接用 <img> 标签加第三方 URL 就能生成占位图，不用写 Canvas、不依赖 JS 库，开发阶段够用且最轻量。
用 placehold.it 这类服务直接嵌入图片
这是最省事的方式，适合原型、本地调试、静态页面。所有请求都走 CDN，返回的是真实 PNG/JPG，浏览器原生支持，无兼容性问题。
-
<img src="https://placehold.it/400x250?x-oss-process=image/resize,p_40">→ 400×250 像素，灰底白字 -
<img src="https://placehold.it/400x250/007bff/ffffff?text=Header?x-oss-process=image/resize,p_40">→ 蓝底白字，“Header”文本居中 - 颜色值支持 3 位或 6 位十六进制（
/09f等价于/0099ff），文本空格要编码为%20 - 注意：placehold.it 已停服多年，实际应换用
https://via.placeholder.com（镜像维护版），URL 格式完全一致
Holder.js 动态生成需注意 DOM 时机和 data-src 写法
Holder.js 是纯前端方案，适合需要响应式占位图、或不允许外链图片的内网环境。但它依赖 JS 执行，且对标签结构有硬性要求。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用
data-src属性存真实图片地址，src留空或设为占位图 fallback（如src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="） - 初始化必须在 DOM 加载后调用：
Holder.run()；若用在 Vue/React 中，得确保组件挂载后再触发 - 不支持
<picture></picture>或srcset，多分辨率场景会失效 - 默认字体是系统无衬线体，中文可能发虚；可加 CSS 强制
font-family: "PingFang SC", "Microsoft YaHei", sans-serif
Canvas 自建生成器只在导出 PNG 场景下值得写
自己用 <canvas></canvas> 绘制占位图，本质是“生成一张图然后转成 data URL”，仅适用于需要离线生成、批量导出、或定制图形逻辑（比如带 logo 水印、渐变边框）的少数情况。
- 核心是
canvas.toDataURL("image/png")，别漏传 MIME 类型，否则部分浏览器返回image/octet-stream导致下载失败 - 文字居中要用
ctx.textAlign = "center"+ctx.textBaseline = "middle"，否则上下左右偏移难调 - 若用户输入中文，务必确认 canvas 字体已加载（
document.fonts.load或预埋@font-face），否则渲染为空白 - 移动端
toDataURL可能因 canvas 尺寸过大（如 > 4096px）触发静默截断，建议限制最大宽高为 2000
真正容易被忽略的点是：占位图不是越“像真图”越好。很多团队在设计系统里硬塞高清猫图（placekitten）或真实风景（Lorem Picsum），结果开发时误以为那是最终素材，上线前才发现版权/尺寸/语义全错。占位图的核心价值是「明确标示此处待填充」，而不是「假装已经完成」——灰底白字的 via.placeholder.com，反而最不容易误导人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
