如何在html加入本地图片不显示不出来

图片不显示主因是路径错误、协议限制或文件问题；需用英文名相对路径、起本地服务（如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加入本地图片不显示不出来" > 标签本身有没有漏关键属性？

看似简单，但少写一个属性就可能让图片“存在但不可见”。

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

下载

• 必须带 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