直接双击打开html文件会因file://协议受浏览器安全策略限制，导致相对路径资源加载失败；唯一可靠方案是启动本地http服务（如python3 -m http.server 8000）并以http://localhost访问。
直接双击打开 HTML 文件会触发 file:// 协议限制
浏览器出于安全策略，默认禁止 file:// 协议下跨目录读取本地文件。哪怕图片和 HTML 在同一文件夹，某些新版 Chrome、Edge 也会拦截 src 指向的本地路径，控制台报错 Not allowed to load local resource。这不是代码错，是协议层限制。
- 绝对路径如
src="C:/project/img.jpg"仅在旧版 IE 或部分本地调试场景有效，现代浏览器基本不认 - 相对路径如
src="img/logo.png"在file://下可能解析失败，尤其当 HTML 路径含中文或空格时 - VS Code “Open with Live Server” 或右键“在浏览器中打开”等操作，若未启动服务，实际仍是走
file://
在线编辑器（如 JSFiddle、CodePen）根本无法访问你电脑上的文件
这些平台运行在远程服务器，你的本地硬盘对它们完全不可见。写 src="images/photo.jpg" 等同于请求 https://cdn.jsfiddle.net/images/photo.jpg —— 显然 404。
- 必须把图片上传到图床（如 ImgBB、Cloudinary），再用其返回的公网 URL 填入
src - 或者改用 Base64 编码嵌入小图：
src="data:image/png;base64,iVBOR..."（注意长度限制，超长会失效） - CodePen 支持通过 Assets 面板上传图片，上传后自动转为可引用的 CDN 地址
本地开发时没起 HTTP 服务，却误以为“能跑就是没问题”
很多初学者在编辑器里点一下“预览”，看到页面出来了就认为一切正常，但此时图片很可能已被静默跳过。真正可靠的测试方式只有一种：用 HTTP 协议访问。
- 命令行快速起服务：
python3 -m http.server 8000（Python 3），然后访问http://localhost:8000/index.html - VS Code 安装 Live Server 插件，右键 HTML 文件选 “Open with Live Server”
- 确认地址栏是
http://开头，不是file:/// - 此时相对路径才按标准 Web 规则解析，
../assets/icon.jpg和/static/logo.svg才真正生效
容易被忽略的细节：路径大小写、斜杠方向、隐藏扩展名
Windows 用户常忽略文件系统不区分大小写，但 Web 服务器（包括本地 http.server）默认区分。一个字母错，就是 404。
- 文件实际叫
Photo.PNG，但 HTML 写了src="photo.png"→ Linux/macOS 服务器上必挂 - 路径中用了反斜杠：
src="images\logo.jpg"→ 必须全改为正斜杠/ - Mac 上启用了“隐藏已知文件扩展名”，你以为是
icon.png，其实是icon.png.png→ 检查真实文件名最简单办法：终端执行ls -la或显示扩展名 - 浏览器开发者工具 Network 面板里点击图片请求链接，如果跳转到空白页或提示 404，说明路径根本没对上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
