HTML中图片路径应优先用根相对路径（如/assets/img/logo.png），以当前Web服务器根目录为基准；若用相对路径，须以HTML文件位置为基准计算层级（如../assets/img/logo.png）；禁用文件系统绝对路径和file://协议，部署前需确认构建产物与服务器目录结构一致。
HTML中图片路径怎么写才不会404
本地图片加载失败，八成是路径没对上。浏览器解析 img 标签的 src 时，只认相对路径或绝对URL，不认文件系统路径（比如 C:\assets\logo.png 或 /Users/xxx/images/icon.jpg）。
常见错误现象：Failed to load resource: the server responded with a status of 404 (Not Found)，但文件明明在项目里。
- 检查当前 HTML 文件所在位置，再算相对路径：如果 HTML 在
/pages/about.html，而图片在/assets/img/logo.svg，就得写../assets/img/logo.svg - 用根相对路径（
/assets/img/logo.svg）更稳，前提是 Web 服务器把项目根目录设为服务路径（如 Nginx 的root或开发服务器的public目录） - 避免使用
file://协议直接双击打开 HTML——现代浏览器会因安全策略阻止加载本地图片 - 构建工具（如 Vite、Webpack）里，
src值若以@/或~/开头，需确认别名是否已配好，否则编译后路径失效
如何让HTML图片适配不同屏幕宽度
单纯写 <img src="banner.jpg"> 在移动端大概率会溢出或模糊。关键不是加个 width: 100% 就完事，而是得配合响应式机制和资源供给。
- 优先用
srcset+sizes：比如<img src="banner-400w.jpg" srcset="banner-400w.jpg 400w, banner-800w.jpg 800w, banner-1200w.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw">，让浏览器按视口宽度选最合适的图 - 搭配
<picture>处理格式降级：WebP 优先，JPEG/PNG 回退，例如用<source type="image/webp" srcset="photo.webp">+<img src="photo.jpg"> - CSS 层面禁用固定宽高，改用
max-width: 100%; height: auto;，防止拉伸变形 - 注意：
srcset中的w单位是“像素宽度”，不是 CSS 像素，跟设备像素比（dpr）有关；Chrome DevTools 的 Network 面板可验证实际加载的是哪张
静态资源目录结构怎么组织才利于维护
一个混乱的 assets/ 目录，半年后连自己都分不清 icon-home-active@2x.png 和 home-icon-active@2x.png 哪个才是最新版。结构不是越深越好，而是要让人一眼看懂归属和用途。
立即学习“前端免费学习笔记（深入）”；
- 按类型分一级目录：
assets/images/、assets/icons/、assets/fonts/、assets/videos/，不要混放 - 图标类资源建议再分语义子目录：
icons/ui/（按钮、开关）、icons/logos/（品牌标识）、icons/social/（微信、微博） - 避免在路径中塞分辨率标记（如
@2x），交给构建工具处理；真正需要多倍图时，用srcset显式声明 - 所有图片文件名用小写+短横线，禁用空格、中文、emoji，例如
user-avatar-placeholder.png，而非User Avatar.png
为什么本地HTML能显示图片，部署后就挂了
本地双击打开或用 python -m http.server 能跑通，但一扔到 Nginx 或 GitHub Pages 就报 404，根本原因往往是路径解析上下文变了。
- 本地双击时，浏览器以文件系统为根，
./images/logo.png指向当前文件同级的images目录；但部署后，Web 服务器以指定目录为根（如/var/www/html），此时./images/就失效了 - GitHub Pages 默认把
index.html当作入口，若你把它放在/docs/index.html，而图片在/docs/assets/img/，那路径必须写成assets/img/logo.png，不能写./assets/img/ - 构建产物中，HTML 可能被输出到
dist/，而图片被复制到dist/assets/，这时 HTML 里的路径必须与输出后结构一致；Vite 用户要检查build.assetsDir配置 - 最保险的做法：统一用根相对路径（
/assets/img/logo.png），并确保 Web 服务器配置允许访问该路径
