每个html页面配一个独立的images/子目录，图片路径用相对路径，页面专属背景图内联或单独css，命名加页面前缀防重名。

每个HTML页面配一个独立的 images/ 子目录

静态页面不走构建流程，就别指望 Webpack 的 require() 或 Vite 的 import 能自动收图。最稳的做法是：每个 HTML 文件（比如 about.html、project.html）对应一个同名子目录（如 about/images/、project/images/），所有该页用到的图片全放进去。

这样做的好处很实在：
– 图片路径写死也绝不会跨页错乱，比如 <img src="images/logo.png"> 在 about/index.html 和 project/index.html 里指向的完全是两套文件；
– 删除某个页面时，连带它的 images/ 目录一起删，零残留；
– 团队协作时，设计师改某页图片，只动那个子目录，不会误碰其他页面资源。

src 路径必须用相对路径，且以当前 HTML 所在位置为基准

常见错误是把图片全堆在根目录 /images/ 下，然后在 contact.html 里写 src="/images/icon-mail.png" —— 这看似省事，但一旦你把 contact.html 移到 pages/contact.html，路径就立刻失效。

正确做法是统一用相对路径：

• 如果 index.html 和 images/ 在同一级，就写 src="images/bg.jpg"
• 如果 blog/post1.html 要用图，就在 blog/images/ 下存图，路径写 src="images/screenshot.png"
• 绝对不用 ../images/ 往上跳 —— 容易因目录层级变化而断链，也违背“页面自治”原则

避免用 CSS background-image 引用跨页图片

CSS 文件常被多个 HTML 共享，但 background 图片若放在共享 css/style.css 里，用 url(../images/banner.png)，就会强制所有引用该 CSS 的页面都得接受同一张 banner —— 这和“按页面管理”的目标直接冲突。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

解法很简单：

• 把页面专属的背景图内联进 HTML 的 <style></style> 块里，比如在 home.html 底部加：

  <style>body { background-image: url("images/home-bg.jpg"); }</style>

• 或者为每页单独建一个 home.css，只被 home.html 引入，里面写 url("images/...") 就完全可控

图片命名带页面前缀，防止重名覆盖

不同页面可能都要一张叫 avatar.png 的图，但内容完全不同。如果全塞进同一个 images/ 目录，后放的会覆盖先放的，而且你根本意识不到。

命名规则建议：

• home-avatar.png（首页头像）
• team-avatar-john.png（团队页 John 的头像）
• product-screenshot-v2.png（产品页截图，带版本号）

这比靠文件夹隔离更进一步——即使某天图被误挪到公共目录，名字也能自证归属。实际项目中，我们见过三个人同时提交 icon.png 导致生产环境头像全变问号，加前缀是最廉价的防错手段。

真正难的不是技术实现，而是所有人从第一天就接受“图片属于页面，不是属于整个站”这个前提。一旦有人开始往根 images/ 里扔图，整套隔离逻辑就从内部瓦解。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！