html相对路径以当前html文件位置为起点计算，移动html文件会导致路径失效；根相对路径（/开头）可避免该问题，但需确保部署结构与服务器配置一致。
HTML中相对路径怎么随目录移动自动适配
HTML里用./、../这类相对路径，本质是按当前HTML文件位置算起的。一旦把HTML从/pages/a.html挪到/blog/2024/a.html，所有src、href里的路径就可能全挂——浏览器找不到资源，直接报404。
最稳妥的做法是统一改用根相对路径（以/开头）：
-
<img src="images/logo.png">→ 改成<img src="/images/logo.png"> -
<link href="css/main.css">→ 改成<link href="/css/main.css"> - 前提是静态资源确实放在网站根目录下对应位置，比如
/images/、/css/
注意：根相对路径的“根”是服务器部署后的域名根，不是项目本地文件系统的根。开发时用本地服务器（如VS Code Live Server）跑，它通常把当前文件夹当根；但上线后得和Nginx/Apache配置的root或document_root对齐。
Spring Boot里Thymeleaf模板路径怎么写才不崩
Thymeleaf用@{...}语法生成URL，它不认传统相对路径，也不依赖HTML文件位置——而是走Spring Boot的静态资源映射规则。所以你不能写src="../images/logo.png"，得用th:src="@{/images/logo.png}"。
关键点：
- 路径必须以
/开头，且对应src/main/resources/static/下的子路径（比如static/images/logo.png→@{/images/logo.png}） - 如果图片在
static/assets/img/，就写@{/assets/img/logo.png}，别漏掉assets这一层 - Thymeleaf不会帮你做路径校验，写错就404，而且控制台没提示——只能靠检查文件是否存在、路径是否完全匹配
常见坑：@{/images/logo.png} 对应的是 static/images/logo.png，不是 static/images/logo.jpg，大小写、扩展名都得严丝合缝。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
JavaScript动态设置图片路径为什么总404
JS里用element.style.backgroundImage = "url(./images/1.jpg)"这种写法，路径解析依然按HTML文档URL来算，不是JS文件所在位置。更麻烦的是，如果HTML被嵌套在多层目录，./很容易指向错地方。
推荐做法：
- 一律用根相对路径：
url("/images/1.jpg")，和HTML里<img src="/images/1.jpg">保持一致 - 避免拼接变量时漏引号：
`url(${path})`是错的，必须是`url("${path}")`或`url('${path}')` - 如果路径来自后端API返回，确保后端给的是完整可访问路径（如
/images/xxx.png），而不是相对片段（如images/xxx.png）
调试技巧：在浏览器控制台打印new URL("./images/1.jpg", document.baseURI).href，就能看到浏览器实际解析出的完整地址，比猜靠谱得多。
为什么换目录后CSS背景图还能加载，但JS里fetch()却404
CSS里的background-image: url(...)路径解析规则和HTML一样，但fetch()、XMLHttpRequest、import()这些API，路径解析只看调用它的JS脚本所在位置——跟HTML在哪没关系。
所以容易踩的坑：
- 一个
utils.js放在/js/utils.js，里面fetch("api/data.json")，那它找的是/js/api/data.json，不是/api/data.json - 解决方法：要么把API路径写成根相对
"/api/data.json"，要么在构建时用环境变量注入基础路径 - 特别注意ES模块的
import：它不支持运行时拼接路径，import(`./${name}.js`)会直接报错，必须用import.meta.url配合new URL()构造绝对路径
归根结底，不同上下文对路径的解析逻辑完全不同，不能默认“都一样”。每次加路径前，先想清楚：这个路径是给谁用的？它按什么规则解析？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
