使用JavaScript开发掷骰子网站时图片加载报错ERR_FILE_NOT_FOUND如何解决

云原生阿岚

2026-10-6

::ERR_FILE_NOT_FOUND 错误为浏览器无法按照指定路径加载对应图片资源，按以下步骤排查即可解决：

核对目录结构与文件命名
确保项目根目录下存在images文件夹，文件夹内的目标文件名称与你引用的dice.png完全一致，注意文件名大小写敏感（Windows本地测试大小写不敏感，但部署到服务器或用静态服务测试时会触发报错，比如Dice.png、dice.PNG都会被识别为不同文件）。
确认路径相对关系正确：如果你的HTML文件存放在项目根目录，images/dice.png的路径写法正确；如果HTML文件放在子文件夹（比如src/index.html），需要将路径调整为../images/dice.png。
检查JS路径赋值逻辑
如果你是根据随机生成的1-6点数加载对应骰子图，确认你拼接路径时没有漏加点数后缀，比如实际图片是dice1.png到dice6.png的情况下，仅写死images/dice.png会触发资源不存在错误，正确写法参考：
```
// randomNum 为你生成的1-6随机整数
const diceImg = document.querySelector('img.dice')
diceImg.src = `images/dice${randomNum}.png`
```
同时检查赋值时路径前后没有多余的空格、特殊字符，避免路径解析错误。
调整本地测试方式
如果你是直接用file://协议打开本地HTML文件测试，可能触发浏览器相对路径解析异常，建议用VS Code的Live Server插件等本地静态服务启动项目，用http协议访问测试。