无法直接用 <img src="file:///..."> 加载本地图片，因浏览器安全策略禁止；可行方案为启动本地HTTP服务访问相对路径，或用FileReader将文件转为data URL。
直接用 <img> 标签无法加载本地文件路径
浏览器出于安全限制，<img src="file:///C:/xxx.jpg"> 在大多数现代浏览器（Chrome、Edge、Firefox）中会直接失败，控制台报错 Not allowed to load local resource。这不是写法错误，而是策略性拦截——HTML5 本身不提供“读取本地磁盘图片”的能力，<img> 的 src 只支持 HTTP(S)、data URL 或相对/绝对路径（需在 Web 服务器环境下解析）。
真正可行的两种方式：服务化访问 or 转 data URL
要让本地图片显示，必须绕过 file:// 协议限制：
- 启动一个本地 HTTP 服务（如
python3 -m http.server 8000），把图片放在项目目录下，然后用相对路径：<img src="images/photo.jpg"> - 用 JavaScript 读取
<input type="file">选中的图片，通过FileReader转成data:URL：<input type="file" id="picker" accept="image/*"> <img id="preview"> <script> document.getElementById('picker').onchange = function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = () => document.getElementById('preview').src = reader.result; reader.readAsDataURL(file); } };</script>
src 路径写法差异直接影响是否加载成功
即使开了本地服务器，路径也容易出错：
- 当前 HTML 在
/project/index.html，图片在/project/images/logo.png→ 正确：<img src="images/logo.png">（相对路径） - 误写成
<img src="/images/logo.png">→ 会从根目录找，即http://localhost:8000/images/logo.png，可能 404 - 误写成
<img src="C:\project\images\logo.png">→ 浏览器不会解析 Windows 绝对路径，直接当字符串拼进 URL，必然失败 - 开发时推荐统一用相对路径，避免硬编码协议或端口
移动端或 Electron 等环境有额外约束
在非标准浏览器环境里，规则更复杂：
立即学习“前端免费学习笔记（深入）”；
-
微信内置浏览器、某些 WebView 会禁用
file://且对data:URL 长度敏感（大图可能截断） - Electron 中默认允许
file://，但需确认webPreferences.webSecurity是否设为false（不推荐）；更稳妥的是用protocol.registerFileProtocol注册自定义协议 - Capacitor / Cordova 应用里，图片应放在
public/或assets/目录，走打包后路径，而非直接引用设备相册路径
