图片不显示主因是目录结构与路径写法不匹配：小项目应在根目录建images/（最多两层子目录），html在根目录时用src="images/logo.png"，在pages/about.html时须用src="../images/logo.png"，并统一小写+连字符命名，避免大小写敏感导致404。
图片不显示，八成不是文件没放对，而是目录结构和路径写法不匹配——尤其当项目从单页扩展到多页、从本地双击切换到服务器环境时，混乱的图片目录会立刻暴露。
小项目直接用 images/ 放根目录，别嵌套
单人维护、≤5 个页面、不用构建工具的静态站，就老老实实用最简结构：根目录下建 images/，所有图都往里塞（可再分 icons/、banner/，但不超过两层）。
-
index.html和images/logo.png同属根目录 → 写src="images/logo.png"，不加./或../ - 如果 HTML 在
pages/about.html，要引用同一张图 → 必须写src="../images/logo.png"，因为参照点变成了pages/目录 - 避免
images/social/twitter.svg这种三层路径——改一个图标要翻三遍目录，协作时第一反应是删了重来 - 所有文件名统一小写 + 连字符，比如
user-avatar.png，否则部署到 Linux 服务器直接 404
Flask 等后端项目必须走 static/ 目录
HTML 模板里的 <img> 标签不能直接指向 templates/ 下的任意位置；Flask 默认只公开 static/ 下的资源，图片必须放进去，且路径以 /static/ 为起点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确结构：
static/uploads/avatar.jpg→ 模板中写src="/static/uploads/avatar.jpg" - 别把图扔进
templates/或同级目录——浏览器根本拿不到，报 404 是必然 - 上传逻辑里配置
app.config['UPLOAD_FOLDER'] = 'static/uploads'，确保保存位置和 URL 路径一致 - 开发时若用
python -m http.server测试，它不认 Flask 的 static 规则，得切回 Flask 启动或配代理
路径写错的三个典型症状和快速验证法
别猜，直接看 Network 面板里请求的 URL 是什么，再比对文件实际位置。常见陷阱不是语法错，而是参照系理解偏差。
-
src="images/logo.png"在pages/about.html中失效 → 实际请求的是pages/images/logo.png，而不是你想要的根目录下的images/ - 双击打开 HTML 时图片空白，但 Live Server 正常 → 缺少
./锚定当前目录，改成src="./images/logo.png"可缓解（仅限开发） - 控制台报 404 但路径看起来没错 → 检查大小写（
IMG.jpg≠img.jpg）、斜杠方向（Windows 显示\，HTML 必须用/）、是否多写了空格或中文标点 - 快速定位失败图：在浏览器控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有未加载成功的<img>
批量管理时优先用 document.querySelectorAll('img[data-batch]') 选图
靠目录结构管图只是基础，真正省事的是用语义化属性 + JS 批量操作。别依赖文件夹命名或路径规律，容易被重构打断。
- 给需要统一处理的图加属性：
<img data-batch="gallery" src="images/1.jpg"> - 用
document.querySelectorAll('img[data-batch="gallery"]')一次锁定，避免getElementsByClassName返回实时 NodeList 导致循环漏改 - 修改
src前先检查是否含.jpg或.webp，防止静默失败；设alt时别硬编码，从配置数组映射更可靠 - 批量监听错误时，用事件委托挂到
document上，比每个<img>单独绑onerror更轻量，也避免内联字符串重复解析
目录结构本身不解决路径问题，它只是让路径变得可预测；真正卡住人的，永远是 HTML 文件位置和 src 字符串之间那层隐式参照关系——每次写路径前，先问一句：“这个 src 是从哪个文件出发找的？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
