先确认请求是否发出、发到哪、返回什么，再改路径；关键看Network面板中图片请求的状态码（404为路径或文件错，403为权限拒绝）、请求URL及是否存在请求，结合绝对/相对路径规则与框架静态资源配置排查。
图片加载 404 不是代码写错了，而是浏览器根本没拿到图——先确认请求发没发出、发到哪去了、返回了什么，再改路径。
Network 面板里看到 404？先盯住请求地址和状态码
右键页面 →「检查」→ 切到 Network → 刷新 → 筛选 img 或直接找 .jpg/.png 请求。关键看三处：
- 状态码是
404：路径错，或文件压根没放对位置 - 状态码是
403：服务器拒绝访问（比如图片放在/src或/node_modules下） - 没看到任何图片请求：
src可能为空、是未渲染的模板变量（如src="{{avatar}}"）、或标签写成了非法的<image></image>
相对路径总出错？用绝对路径或显式基准
src 解析永远以当前 HTML 文件所在目录为起点，不是项目根目录，也不是 JS/CSS 文件位置。常见翻车点：
- HTML 在
/pages/index.html，图片在/assets/logo.png→ 必须写src="../assets/logo.png"，不能写src="/assets/logo.png"（那是根路径，只在部署到域名根目录时才对） - HTML 和图片同在
/下 →src="logo.png"可行，但更稳妥写src="./logo.png"，明确“从本目录开始找” - VS Code 拖拽生成的路径带
file:///前缀 → 手动删掉，只留./images/icon.svg这类相对路径 - Windows 下用
\分隔路径 → 浏览器不认，一律改用/
Django / Flask / Spring Boot 等框架里图片 404？静态资源必须显式声明可服务
框架不会自动托管任意目录下的图片，必须走配置好的静态资源路径：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- Django：图片放进
static/目录，模板中用{% static 'images/logo.png' %}，别用./logo.png或../images/logo.png - Flask：确保文件夹叫
static（不能是assets），HTML 中用{{ url_for('static', filename='images/logo.png') }} - Spring Boot + Thymeleaf：图片放
src/main/resources/static/images/，写th:src="@{/images/logo.png}" - 所有框架都需人工核对大小写：Linux 服务器大小写敏感，
Logo.png和logo.png是两个文件
本地双击打开 HTML 就 404？停用 file:// 协议
双击 HTML 走的是 file:// 协议，此时 / 指向磁盘根（如 C:/），./ 行为也不统一，Chrome/Edge 甚至会拦截图片请求。这不是 bug，是安全限制：
- Python 用户：终端进项目根目录，运行
python -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户：装
serve，运行npx serve -s - VS Code 用户：装 Live Server 插件，右键 HTML →「Open with Live Server」
真正卡住人的地方，往往不是路径本身，而是 fallback 图也 404 导致 onerror 无限循环；或者开发时用 Windows 测试没问题，上线 Linux 服务器因大小写敏感突然全挂。这些细节不提前踩一遍，问题只会延迟爆发。
