无法直接用 加载本地图片，因浏览器安全策略禁止；可行方案为启动本地HTTP服务访问相对路径，或用FileReader将文件转为data URL。
直接用 ![HTML5怎样插入本地图片_HTML5插入本地图片方式【基础】]()
浏览器出于安全限制，
Not allowed to load local resource。这不是写法错误，而是策略性拦截——HTML5 本身不提供“读取本地磁盘图片”的能力，src 只支持 HTTP(S)、data URL 或相对/绝对路径（需在 Web 服务器环境下解析）。
真正可行的两种方式：服务化访问 or 转 data URL
要让本地图片显示，必须绕过 file:// 协议限制：
- 启动一个本地 HTTP 服务（如
python3 -m http.server 8000），把图片放在项目目录下，然后用相对路径：
- 用 JavaScript 读取
选中的图片，通过FileReader转成data:URL：@@##@@
src 路径写法差异直接影响是否加载成功
即使开了本地服务器，路径也容易出错：
- 当前 HTML 在
/project/index.html，图片在/project/images/logo.png→ 正确： - 误写成
http://localhost:8000/images/logo.png，可能 404 - 误写成
- 开发时推荐统一用相对路径，避免硬编码协议或端口
移动端或 Electron 等环境有额外约束
在非标准浏览器环境里，规则更复杂：
立即学习“前端免费学习笔记（深入）”；
-
微信内置浏览器、某些 WebView 会禁用
file://且对data:URL 长度敏感（大图可能截断） - Electron 中默认允许
file://，但需确认webPreferences.webSecurity是否设为false（不推荐）；更稳妥的是用protocol.registerFileProtocol注册自定义协议 - Capacitor / Cordova 应用里，图片应放在
public/或assets/目录，走打包后路径，而非直接引用设备相册路径
