404错误表明浏览器成功发出请求但服务器未找到对应资源，核心是请求url路径与实际文件物理路径不匹配；需通过network面板确认请求地址，再严格对照文件系统位置、大小写、框架静态目录约定及服务器配置进行修正。
浏览器Network面板里看到图片请求返回404
说明浏览器确实发出了请求，但服务器没找到对应文件。这不是代码语法错误，而是路径和物理文件之间没对上。
打开开发者工具（F12），切到 Network → 刷新页面 → 找到那个带 404 状态的图片请求，点开看它的 Request URL。这个 URL 就是浏览器“以为”该去哪找图，你要做的，就是让真实文件出现在这个路径下，或改 src 让它指向正确位置。
- 检查 URL 中的路径是否含多余
../或漏掉某级目录，比如实际图片在/static/images/logo.png，但请求的是/images/logo.png - 确认 URL 中的文件名、扩展名、大小写完全一致——Linux 服务器上
Logo.png≠logo.png - 如果 URL 是
http://localhost:8000/img/abc.jpg，就去项目根目录下的img/文件夹里找abc.jpg，而不是看 HTML 文件在哪
用相对路径时总差一级目录
相对路径永远以当前 HTML 文件所在位置为起点，不是以 JS 或 CSS 文件，也不是以你“感觉上”的位置。
比如 index.html 在 /pages/home/index.html，而图片在 /images/photo.jpg，那正确写法是：src="../../images/photo.jpg"（向上两级到根，再进 images）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 避免靠猜：先在文件管理器里把 HTML 和图片两个路径都展开，手动数清楚要跨几级
-
./表示当前目录，可省略；../表示上一级，每多一个就再往上跳一层 - 静态站点生成器（如 Hexo）或框架（如 Django、Spring Boot）不认纯相对路径，它们只服务配置好的静态目录，此时写相对路径基本等于白写
Django / Spring Boot / Thymeleaf 等后端框架里图片还是404
这些框架不会自动托管你随手放在 HTML 同级或任意文件夹里的图片。它们只通过预设的静态资源路径提供文件，比如 Django 的 static/，Spring Boot 的 src/main/resources/static/。
- Django：图片必须放
static/images/xxx.jpg，HTML 中用{% static 'images/xxx.jpg' %}，且settings.py要有STATIC_URL = '/static/' - Spring Boot + Thymeleaf：图片放
src/main/resources/static/images/xxx.jpg，HTML 中写th:src="@{/images/xxx.jpg}" - 别把图片塞进
templates/目录——那是渲染用的，不对外提供 HTTP 访问 - 开发时 URL 显示为
http://127.0.0.1:8000/static/images/xxx.jpg，你就得确保这个路径下真有文件（注意大小写和特殊字符，如ö在 URL 中可能需编码）
本地双击打开HTML时图片正常，一放到服务器就404
因为 file:// 协议下，浏览器对相对路径的解析比较宽松，甚至容忍一些错误；而 HTTP 协议下，路径规则严格，且受服务器配置约束。
- 别用
file:///测试——启动一个最小本地服务器，比如 Python：python -m http.server 8000，然后访问http://localhost:8000 - 确认服务器 DocumentRoot 指向的是你期望的根目录（例如 Apache 的
htdocs，Nginx 的html） - 检查是否启用了目录浏览（DirectoryIndex），否则访问
/可能找不到默认首页，连带影响所有相对路径解析基准 - 有些构建工具（如 Vite、Webpack）会重写路径，若用了
base配置，src="/img/x.jpg"实际请求的是http://host/base/img/x.jpg，得同步调整路径或配置
最常被忽略的一点：路径问题从来不是孤立的。它总是和你的部署结构、框架约定、服务器配置三者咬合在一起。盯着 src 改来改去没用，必须对照 Network 面板里的请求地址，反向验证文件物理位置，再结合框架文档确认静态资源是否被纳入服务范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
