Emmet 默认生成固定尺寸占位图,不支持真随机;自定义缩写仍需手动输入参数;Text Pastry 可批量生成笛卡尔积组合;Sublime 控制台用 Python 一行代码实现真随机;推荐 placehold.co 替代已关停服务。

用 Emmet 插入固定尺寸占位图,但别指望它真随机
Emmet 的 img 缩写默认生成的是静态占位图,比如输入 img + Tab 会出来 <img src="https://via.placeholder.com/300x200" alt="">。它不生成随机尺寸或颜色,变量如 $1、$2 在 Emmet snippets 中只是模板占位符,不会自动填充随机数。
若想改用自定义缩写(例如支持 pic300x200),需手动编辑 Emmet 的 snippets 配置:
- 打开
Preferences → Package Settings → Emmet → Settings - 在
snippets字段中添加类似:"html": { "abbreviations": { "pic": 'img[src="https://via.placeholder.com/$1x$2/$3/$4?text=$5"][alt="$5"]' } } - 保存后输入
pic+ Tab,再按 Tab 跳到$1位置手动填数字——仍是手动,不是随机
用 Text Pastry 批量生成多组尺寸/颜色组合
这是最接近“批量占位图”的实用方案,适合一次插入 5–20 张不同参数的图片链接,但注意:它做的是笛卡尔积组合,不是真随机抽样。
操作流程:
立即学习“前端免费学习笔记(深入)”;
- 先装好
Text Pastry插件(通过 Package Control 安装) - 在 HTML 文件中选中 N 行空行(比如 6 行)
- 按
Ctrl+Alt+V(Win/Linux)或Cmd+Alt+V(macOS)打开列输入面板 - 输入模板:
https://placehold.co/{0}x{1}/{2}/{3}?text=img - 四组值分别填入(用逗号分隔):
300,400,500/200,250/4a9eff,ff6b6b,556b2f/ffffff,000000 - 它会生成 3 × 2 × 3 × 2 = 36 行,你可删掉多余部分
推荐用 https://placehold.co/ 替代已关停的 lorempixel.com 或响应慢的 via.placeholder.com,前者支持 CORS、无请求限制、返回更快。
需要真随机?用 Sublime Python 控制台一行搞定
Sublime 自带 Python 解释器,适合临时生成单个或少量真正随机链接,不用装插件、不依赖网络请求逻辑。
步骤:
- 按
Ctrl+`(反引号)打开控制台 - 粘贴并执行:
import random; print(f"https://picsum.photos/{random.randint(300,800)}/{random.randint(200,600)}") - 复制输出结果,粘贴到 HTML 中即可
注意:picsum.photos 返回的是真实照片(非纯色块),若要纯色占位图,把 URL 换成 https://placehold.co/{w}x{h}/{bg}/{fg}?text=,再用同样方式生成随机宽高和颜色值。
别踩这些坑:路径、协议、插件失效
很多人卡在图片不显示,其实和“随机”无关,而是基础配置翻车:
-
subl://协议不能加载图片——它只用于打开本地文件,跟 HTTP 图片资源完全无关 - 第三方插件如
RandomImage多数已停止维护,依赖的lorempixel.com早在 2019 年关停,现在调用直接 404 - Windows 下复制的路径含反斜杠
\,HTML 中必须改成正斜杠/,否则浏览器静默忽略 - 用相对路径时,
src是相对于当前 HTML 文件位置算的,不是 Sublime 当前打开的文件夹根目录
真正省时间的做法,是把常用占位服务(placehold.co、picsum.photos)记熟,配合 Text Pastry 或控制台手动生成——没有全自动的“随机按钮”,但有足够快的手动闭环。



















