浏览器禁止直接读取本地绝对路径，应使用相对路径引用图片，如src="logo.png"；注意大小写、避免空格和中文名；禁用file:///协议；小图可用data URL内联。
直接用 <img alt="HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】" > 标签，但路径不能写 C:\xxx 或 /C:/xxx
浏览器无法直接读取本地磁盘绝对路径（比如 C:\Users\Alice\Pictures\logo.png），这是安全限制。哪怕你双击 HTML 文件在本地打开，src 里写绝对 Windows 路径也会显示空白或报错 net::ERR_FILE_NOT_FOUND。
正确做法是把图片和 HTML 文件放在同一目录（或子目录），用相对路径引用：
<img src="logo.png" alt="HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】" > <!-- 同级目录 --> <img src="images/photo.jpg" alt="HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】" > <!-- 子目录 images 下 --> <img src="../assets/icon.svg" alt="HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】" > <!-- 上级目录的 assets 文件夹 -->
- 路径区分大小写（尤其部署到 Linux 服务器时）
- 空格和中文名容易出问题，建议文件名用英文+短横线，如
my-banner.jpg - 不要用
file:///C:/...协议——现代浏览器会拦截或静默失败
想临时调试又没起服务？用 data URL 内联小图
对图标、小尺寸 PNG（src，完全不依赖文件路径：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】" >
实操步骤：
立即学习“前端免费学习笔记（深入）”；
- 用在线工具（搜 “image to base64”）上传本地图片，复制生成的字符串
- 粘贴到
src中，注意开头必须是data:image/xxx;base64,（类型要匹配，PNG 就写image/png） - 只适合小图——大图会让 HTML 膨胀，加载变慢，且无法缓存
正式开发必须用本地 Web 服务器，别双击打开 HTML
双击 HTML 文件走的是 file:// 协议，很多功能受限（跨域、fetch、Service Worker、部分 CSS 模块等）。图片虽能靠相对路径勉强显示，但一旦加 JS 动态加载、用 import、或引入现代构建工具，立刻报错。
最轻量启动方式（无需安装）：
- VS Code：装插件
Live Server，右键 HTML → “Open with Live Server” - 命令行（有 Python 3）：
python -m http.server 8000，然后访问http://localhost:8000 - 确保图片路径按服务器根目录计算，不是按你电脑的 C 盘路径
常见错误现象和对应检查点
图片不显示？先看控制台（F12 → Console）有没有报错，再对照这些查：
-
GET http://localhost:8000/logo.png 404 (Not Found)→ 路径写错，或文件没放对位置；检查开发者工具 Network 标签里请求的实际 URL - 图片区域一片空白，无报错 → 检查
src值是否为空、是否多写了空格、是否用了中文引号“”代替英文引号"" - 显示一个破损图标（?）→ 图片格式不支持（如 WebP 在旧浏览器）、后缀名和实际格式不符（
.jpg文件其实是 PNG） - 双击打开时控制台报
Not allowed to load local resource→ 正是file://协议被拦，必须起服务
路径问题从来不是“写对了就行”，而是“在当前运行上下文里，浏览器能找到的相对位置”。本地调试阶段最容易忽略这点。
