图片资源应统一放在与html同级的assets/目录下的images/子目录中，引用时必须使用./assets/images/logo.png格式以确保路径准确。
图片资源该放在哪一级目录
所有静态资源（图片、CSS、JS）必须和 HTML 文件同级，或统一放在同级的 assets（或 static）文件夹里。不要把图片直接丢在桌面或项目根外层，也不要混用 ./images/ 和 images/ —— 前者是相对当前 HTML 路径，后者在部分服务器下会被解析为根路径，极易出错。
常见错误现象：<img src="logo.png"> 在 /pages/about.html 中能显示，在 /index.html 中 404；或者开发时正常，部署到子路径（如 /myapp/）后全挂。
- ✅ 推荐结构：HTML 文件与
assets/平级，图片放assets/images/ - ✅ 引用写法统一用
./assets/images/logo.png（开头带./明确相对起点） - ⚠️ 避免写
assets/images/logo.png（缺./，某些构建工具或本地双击打开时会误判为绝对路径）
Streamlit 里引用本地图片为什么总 404
Streamlit 默认不提供静态文件服务，<img src="/img/logo.png"> 这类写法本质是向 Streamlit 后端发请求，但后端根本没配路由去返回这个文件。
必须两步同时做：
- 在项目根目录建
.streamlit/config.toml，写入[server]\nenableStaticServing = true - 把图片放进项目根目录下的
static/文件夹（不是assets/，也不是public/，必须叫static） - HTML 模板中引用路径必须以
/static/开头，例如<img src="/static/logo.png">
漏掉任意一步，图片就加载失败。尤其注意：配置文件名是 config.toml，不是 settings.toml 或 streamlit.toml。
怎么批量检查哪些图片实际没加载
靠肉眼点开每个页面看 alt 文字太慢，开发阶段用控制台一行命令就能筛出所有“假图”：
Array.from(document.images).filter(i => i.naturalWidth === 0)
返回的数组就是所有加载失败的 <img> 元素。点开任一元素，看它的 src 属性值，立刻定位路径问题。
- 如果返回空数组，说明所有图片都已成功解码（哪怕还没完全渲染）
- 配合
onerror做降级更稳妥：<img src="x.jpg" onerror="this.src='placeholder.svg'; this.title='ERR: '+this.src;"> - 注意：不能只依赖
complete属性，它在图片缓存命中时可能为true，但naturalWidth仍为0
响应式图片路径要不要动态切
不需要。现代浏览器靠 srcset + sizes 就能自动选图，所有变体图片仍走同一套路径管理规则。
例如：
@@##@@
关键点：
- 所有
srcset中的路径，必须和src保持相同层级关系（都用./assets/...） - 别为了“省事”把不同尺寸图扔进不同文件夹，维护成本翻倍，且
srcset不支持路径通配 -
sizes是告诉浏览器“这张图在不同断点下打算占多宽”，不是指定文件路径
路径管理的复杂点从来不在“怎么写”，而在于“谁来保证所有 src、srcset、CSS background-image、JS 动态插入路径全部同步更新”。手动改容易漏，真要规模化，得靠构建脚本或约定式导入（比如统一从 ./assets/images/index.js 导出路径常量）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
