HTML的src属性路径错误会导致静默失败而非报错；相对路径以HTML文件位置为基准，根相对路径以域名后首斜杠为起点，绝对URL走网络请求；CSS中url()与src规则一致；构建工具仅重写静态字符串路径，动态路径需手动确保有效；SSR场景下需用完整URL或构建工具注入的公共路径前缀。
HTML 的 src 属性填错路径，浏览器根本不会加载资源——不是报错，是静默失败。
相对路径怎么写才不 404
浏览器解析 src 是以当前 HTML 文件所在位置为起点，不是以项目根目录或服务器根目录。比如 HTML 在 /pages/index.html，想引用同级的 logo.png，就写 src="logo.png"；如果图片在 /assets/img/icon.svg，就得写 src="../assets/img/icon.svg"（注意两个点）。
- 常见错误：把开发时 VS Code 预览的路径当真，实际部署后结构一变全挂
- 路径里别用中文或空格，
src="头像.jpg"在某些系统会直接失效 -
./开头可加可不加，但../必须严格数清层级，多一个或少一个点都会 404
绝对路径 vs 根相对路径的区别
src="/images/cover.jpg" 这种以 / 开头的是“根相对路径”，它从域名后的第一个斜杠开始算，和 HTML 文件位置无关。而 https://cdn.example.com/js/app.js 是完整绝对 URL，走网络请求，不受本地路径影响。
- 本地开发用根相对路径容易出问题：localhost:3000 和 nginx 部署到 /blog/ 下，
/js/main.js指向的位置完全不同 - CSS 里的
url()和 HTML 的src路径解析规则一致，但很多人只改 HTML 忘了同步修 CSS - 构建工具（如 Vite、Webpack）常自动重写
src，但仅限静态字符串，拼接变量（src={url}）不会处理
动态设置 src 容易漏掉的三件事
JS 里用 img.src = "xxx" 或 Vue/React 绑定 :src 时，路径逻辑没变，但执行时机和上下文更容易出岔子。
立即学习“前端免费学习笔记（深入）”；
- 图片路径是变量时，确保它不是空字符串或
undefined，否则会触发默认图标或控制台警告 - 使用
import引入图片（如import avatar from './avatar.png'），Webpack/Vite 会返回真实打包路径，直接赋值给src才安全；硬写字符串路径会被忽略 - 服务端渲染（SSR）场景下，Node 环境无法解析浏览器相对路径，
src值必须是完整 URL 或由构建工具注入的公共路径前缀
路径问题从来不是“写对就行”，而是“在哪写、谁解析、什么时候解析”三个环节都得对上。最常被忽略的是：开发时路径能跑，是因为开发服务器做了路由 fallback，上线后 Nginx 没配，404 就来了。
