HTML img标签加载本地图片报net::ERR_FILE_NOT_FOUND错误如何解决

算力阿峰

2026-9-3

Book_Store项目img标签加载本地图片报ERR_FILE_NOT_FOUND排查方案

核心错误原因

这个报错本质是浏览器按你写的src属性路径解析后，找不到对应的图片文件，90%以上的情况都是路径写法、文件位置、命名不匹配导致的，常见诱因如下：

路径写法错误：在file协议下直接打开本地html时，使用了以/开头的根路径写法（比如/imgs/cover.jpg），此时根路径指向的是本地磁盘根目录，不是你的Book_Store项目根目录，自然找不到文件
层级匹配错误：如果index.html没有放在Book_Store根目录，而是存放在子文件夹下，直接写imgs/xxx.jpg会从当前html所在的子文件夹里找imgs目录，路径层级不对
命名不匹配：代码里写的文件夹名、图片名、后缀名和实际文件不一致，比如实际文件夹叫img你写了imgs、实际后缀是大写.JPG你写了小写.jpg、文件名拼写错误、多打漏打字符
文件存放位置错误：图片实际没有放到项目的imgs子文件夹里，或者imgs嵌套了多余的子目录没有写到路径里
打开方式问题：直接双击本地html用file://协议打开，部分浏览器会限制本地文件访问，就算路径正确也可能加载失败

先对齐项目结构
先确认你的项目结构符合预期，如果index.html放在项目根目录，结构应该是：
```
Book_Store/
├─ index.html
└─ imgs/
   └─ 目标图片文件（例：book_cover.jpg）
```
写对相对路径
根目录下的index.html不要用开头带斜杠的路径，直接写相对路径即可：
```

<img src="imgs/book_cover.jpg" alt="书籍封面">
```
如果你的index.html存放在子目录（比如Book_Store/views/index.html），需要先回到上一级项目根目录再找imgs文件夹，路径写法为<img src="../imgs/book_cover.jpg" alt="书籍封面">，其中../代表当前文件的上一级目录。
逐字核对命名
把代码里的文件夹名、图片文件名、后缀名和本地实际文件完全对齐，注意区分大小写、特殊字符、空格，不要出现拼写错误。写路径的时候可以在VS Code里输入src="后按Ctrl+空格触发路径自动补全，直接选择目标图片，自动生成的路径不会出错。
用本地服务打开项目（推荐）
不要直接双击打开html文件，在VS Code中安装Live Server插件，右键index.html选择「Open with Live Server」，通过本地http服务访问项目，既可以避开file协议的本地文件访问限制，路径解析逻辑也和线上部署环境完全一致，能减少很多不必要的路径问题。

内容的提问来源于stack exchange，提问作者Mohamed