相对路径更稳妥，因其相对于HTML文件位置计算，避免子目录部署时根路径错位；但需严格匹配层级，如HTML在pages/about.html则图片路径应为../assets/img/icon.svg。
图片路径写相对还是绝对？
静态图片路径用相对路径更稳妥，尤其是项目部署到子目录时。比如 src="./images/logo.png" 比 src="/images/logo.png" 更少出错——后者在 https://example.com/app/ 下会请求 /images/logo.png（即根目录），实际资源却在 /app/images/。
但注意：相对路径是相对于当前 HTML 文件位置计算的，不是相对于 CSS 或 JS。如果 HTML 在根目录、图片在 assets/img/，就写 ./assets/img/icon.svg；如果 HTML 在 pages/about.html，就得写 ../assets/img/icon.svg。
- 开发阶段建议统一把 HTML 放在根目录，避免多层嵌套带来的路径混乱
- 构建工具（如 Vite、Webpack）默认支持
./开头的路径解析，无需额外配置 - 不要用
file://协议本地双击打开 HTML——图片路径会失效，必须走本地服务器
如何避免图片 404 却不报错？
浏览器加载 <img> 失败时默认不抛 JS 错误，控制台只显示 404 日志，容易漏掉。得主动监听 onerror：
<img src="./logo.png" onerror="this.src='./fallback.png'; this.alt='加载失败'">
更健壮的做法是封装检查逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()预检图片 URL 是否可访问（注意跨域限制） - 服务端渲染时，可在模板里用条件判断文件是否存在（如 Node.js 的
fs.existsSync()） - CI/CD 流程中加入脚本扫描所有
src属性值，比对实际文件列表
Vite / Webpack 项目里图片要不要放 public 目录？
取决于使用方式：public 目录下的文件会被直接拷贝到输出目录，不参与构建，适合 favicon、robots.txt 这类“纯静态”资源；而组件内用的图片应放在 src/assets/ 下，让打包器处理：
- 放进
src/assets/：支持 import，能自动哈希重命名（防缓存）、压缩、转 base64 小图 - 放进
public/：路径固定为/xxx.png，无法享受构建优化，但可被任意 HTML/CSS/JS 引用，适合第三方 SDK 要求的固定路径 - 混淆点：
import logo from './logo.png'得到的是最终 URL 字符串（如/assets/logo.abc123.png），不是原始路径
响应式图片怎么写才真正生效？
光写 <img srcset="..."> 不够，浏览器是否下载哪张图，取决于设备像素比、视口宽度、网络条件等。关键要配全属性：
<img
src="./photo-small.jpg"
srcset="./photo-small.jpg 480w,
./photo-medium.jpg 768w,
./photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="示例图">
常见失效原因：
-
sizes写错或缺失：浏览器无法估算图片渲染宽度，可能始终加载最大图 - 未设置
width和height：导致布局偏移（CLS），尤其在懒加载时 - WebP 格式没加降级：
<picture>包一层更安全，否则旧浏览器直接白屏
现代项目建议用 <picture> + <source type="image/webp"> + <img> 降级组合，而不是只靠 srcset。
