浏览器禁止通过file://协议直接加载任意本地绝对路径图片，仅支持同目录或子目录的相对路径；需访问任意本地图片时，应使用<input type="file">配合FileReader或URL.createObjectURL()实现。
直接用 <img> 标签，但路径必须是相对或绝对文件路径（非任意本地路径）
浏览器出于安全限制，不能通过 file:// 协议随意读取你电脑上任意位置的图片（比如 C:\Users\Name\Pictures\cat.jpg）。你能在网页里“调用本地图片”，本质是让浏览器加载一个它能访问到的文件路径——要么图片和 HTML 在同一目录（或子目录），要么你开了本地服务器。
常见错误现象：<img src="C:\my\photo.jpg"> 在双击打开 HTML 时显示空白或报错 Not allowed to load local resource，这就是典型的安全拦截。
- ✅ 正确做法：把图片和 HTML 文件放在同一个文件夹，用相对路径，如
<img src="logo.png"> - ✅ 或放子目录：如图片在
images/cat.jpg，就写<img src="images/cat.jpg"> - ❌ 绝对 Windows 路径
C:\...、D:\...在双击打开时基本无效 - ⚠️ macOS/Linux 的
/Users/xxx/...同样不被允许（除非用file://+ 正确编码，且多数现代浏览器已禁用）
双击打开 HTML 时想加载本地图？只支持同目录及子目录的相对路径
这是最常被忽略的前提：当你没有启动本地服务器，只是双击 index.html 运行，浏览器使用的是 file:// 协议。此时它只认相对于当前 HTML 文件位置的路径。
假设你的文件结构是：
立即学习“前端免费学习笔记（深入）”；
project/
├── index.html
└── assets/
└── photo.jpg
那么在 index.html 中必须写：
<img src="assets/photo.jpg">
而不是 src="/assets/photo.jpg"（开头的 / 表示根目录，file:// 下的“根”是整个磁盘，不是 project 文件夹）。
- ✅
src="photo.jpg"→ 找同级目录下的photo.jpg - ✅
src="imgs/1.png"→ 找同级imgs文件夹里的1.png - ❌
src="/imgs/1.png"→ 尝试找磁盘根目录下的/imgs/1.png，几乎肯定失败 - ❌
src="../other/photo.jpg"→ 只有上级目录存在且路径正确才有效，容易出错
需要访问任意本地路径？必须起一个本地 HTTP 服务器
开发阶段真要绕过 file:// 限制（比如调试从用户选择的文件中预览图片），唯一可靠方式是用 HTTP 服务托管页面。这时浏览器走 http://localhost:8000，不再受本地文件协议限制。
最轻量做法（无需安装 Node.js）：
- Python 3：终端进入项目目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000 - VS Code 安装插件 “Live Server”，右键 HTML 文件点 “Open with Live Server”
- Chrome 扩展 “Web Server for Chrome”（注意：已下架，不推荐）
此时 <img src="C:/Users/Me/Pics/test.jpg"> 依然不行——HTTP 服务器只服务它自己目录及子目录下的文件，不会帮你读 C 盘任意路径。真正“任意本地图”的需求，得靠 JavaScript 的 <input type="file"> + FileReader 实现，不是靠 <img src>。
<input type="file"> 是唯一合法读取用户任意本地图片的方式
如果你的目标是让用户从自己电脑选一张图并在网页里显示，这才是标准解法。它不依赖路径，而是通过用户主动选择触发读取权限。
最小可用示例：
<input type="file" accept="image/*" id="picker">
<img id="preview" width="200">
<script>
document.getElementById('picker').onchange = function(e) {
const file = e.target.files[0];
if (file && file.type.startsWith('image/')) {
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
}
};
</script>
关键点：
-
accept="image/*"过滤文件类型，提升体验 -
URL.createObjectURL(file)创建临时内存 URL，比FileReader.readAsDataURL更高效（尤其大图） - 生成的
url是临时的，页面刷新即失效，不能存为永久链接 - 这和
<img src="...>写死路径完全不是一回事，它是运行时动态加载
