图片不显示主因是路径错误、协议限制或文件问题；需用英文名相对路径、起本地服务（如python3 -m http.server）、检查src属性、文件权限及格式是否匹配。
图片路径写对了没？src 必须是相对或绝对文件路径，不是 URL 或中文名
本地图片不显示，八成卡在路径上。浏览器加载 <img src="..." alt="如何在html加入本地图片不显示不出来" > 时，不会去猜你“想”用哪张图，只认它能按路径真实读到的文件。
-
src不能写成"./images/我的照片.jpg"—— 中文路径在部分系统（尤其 windows + 某些编辑器）会因编码问题失败，优先改用英文名 - 相对路径以 HTML 文件所在目录为起点，不是项目根目录。比如
index.html在/project/index.html，图片在/project/images/logo.png，那src就得是"images/logo.png"，不是"/images/logo.png"（开头多一个/就变成从系统根目录找了） - 别用
file:///协议写死路径，比如"file:///C:/project/images/logo.png"—— 这在本地双击打开 HTML 时可能偶然生效，但换台电脑、换个浏览器、或者用服务器打开就直接失效
浏览器直接双击打开 HTML？file:// 协议下跨目录访问常被拦截
很多新手直接用文件管理器双击 index.html，这时浏览器走的是 file:// 协议，安全策略比 HTTP 严格得多。哪怕路径完全正确，也可能因同源限制拒绝加载某些资源。
- chrome 和 edge 默认禁止
file://页面加载本地子目录外的资源（比如用../回退上级目录） - firefox 相对宽松，但依然可能报
Blocked loading Resource from url not allowed in this context - 最稳解法：起个本地服务。命令行进项目根目录，执行
python3 -m http.server 8000（Python 3），然后访问http://localhost:8000—— 此时路径解析和网络环境一致，问题立现或立解
<img alt="如何在html加入本地图片不显示不出来" > 标签本身有没有漏关键属性？
看似简单，但少写一个属性就可能让图片“存在但不可见”。
- 必须带
src，且值非空字符串。写成src=""或src=" "都会触发默认的破损图标 - 如果设置了
width/height但值为0或负数，图片区域坍缩，实际还在 dom 里，只是看不见 - CSS 可能覆盖了显示，比如父容器有
overflow: hidden，或图片本身被display: none/visibility: hidden干掉 —— 打开开发者工具检查元素，看 computed styles 里display和visibility是不是真为block和visible
图片文件本身能不能被读到？权限和格式都得过一遍
路径对、协议稳、标签全，还是不显示？那就得查文件本身了。
立即学习“前端免费学习笔记（深入）”；
- 右键图片文件 → “属性” → 看是否被系统标记为“来自其他计算机”，Windows 可能自动加锁，需手动点“解除锁定”
- 确认扩展名和实际格式一致。比如文件叫
logo.png，但其实是 JPEG 编码，浏览器解析失败；可用命令行快速验证：file logo.png（macos/linux）或用在线工具看二进制头 - 某些老旧浏览器不支持 WebP 或 AVIF，本地开发时用 Chrome/Firefox/Edge 新版基本没问题，但若目标用户环境受限，得转成
.png或.jpg
图片不显示这事，表面是路径问题，深层常是协议、权限、格式三者之一在捣鬼。最容易被忽略的是：你以为路径是对的，其实浏览器根本没机会读到那个文件 —— 先起个本地服务，再看控制台有没有 404 或 CORS 报错，比瞎猜快得多。