浏览器打不开本地图片主因是src路径错误，需用相对路径、避免绝对路径和中文名；双击打开受file://协议限制，应启用本地服务器；img标签必须含alt属性并建议设置宽高。

图片路径写错是最常见的原因

浏览器打不开本地图片，90% 是因为 src 路径没写对。HTML 里不能用绝对路径（比如 C:\Users\name\Pictures\logo.png），也不能靠“双击打开 HTML 文件”就自动识别相对路径——它只认当前 HTML 文件所在目录为基准。

正确做法是把图片和 HTML 文件放在同一目录下，然后用相对路径：

@@##@@

如果图片在子文件夹 images/ 里，就得写：

@@##@@

• 路径区分大小写（Logo.png ≠ logo.png）
• 不要加 file:// 或 ./ 前缀（多数情况冗余，某些本地双击场景反而失效）
• 中文文件名容易出问题，建议全用英文+下划线命名

双击打开 HTML 文件时的特殊限制

直接双击 index.html 运行，浏览器会以 file:// 协议加载。这时部分浏览器（尤其是 Chrome）会阻止读取本地图片，报错类似：

Not allowed to load local resource: file:///.../logo.png

这不是你代码错了，而是浏览器安全策略。解决办法只有两个：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用本地服务器启动（推荐）：终端进项目目录，运行 python3 -m http.server 8000，然后访问 http://localhost:8000
• 换用 Firefox 或 Edge 双击测试（它们对 file:// 的限制更宽松）

<img src="logo.png" alt="公司标志"> 标签必须写的属性

光有 src 不够，alt 是强制可访问性要求，不写会影响 SEO 和屏幕阅读器体验。另外，没有宽高属性时，图片加载前页面会跳动——建议提前设好：

@@##@@

注意：width/height 是 HTML 属性，不是 CSS；现代写法更倾向用 CSS 控制尺寸，但保留这两个属性能避免布局偏移（layout shift）。

• alt 内容要简洁准确，空字符串 alt="" 表示图片纯装饰
• 不要用 title 替代 alt，两者语义完全不同
• 如果图片是 SVG，确保它是内联或通过 src 引入，别用 <object></object> 或 <iframe></iframe> 绕路

调试图片不显示的三步检查清单

遇到图片空白，按顺序快速验证：

• 右键网页 → “检查” → 切到 Network 标签页，刷新，看图片请求是否 404（路径错）或 0 B（文件不存在）
• 在开发者工具的 Elements 面板里，鼠标悬停在 <img src="images/logo.png" alt="公司标志"> 标签上，看右上角是否实时预览缩略图（没出现说明路径无效）
• 把图片文件拖进浏览器地址栏，确认能否直接打开——如果打不开，说明文件本身损坏或权限受限

本地图片这事看着简单，但路径、协议、属性、调试四块都得对上才成。最容易被忽略的是双击打开时的协议限制，很多人卡在这里反复改路径，其实该起个本地服务了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！