浏览器加载页面图片返回404 静态资源存放与路径配置问题

路径解析逻辑 #

你代码中配置的图片路径img/kiosk/License_Sample.jpg是相对站点应用根路径解析的，从开发者工具捕获的请求可以看到，浏览器实际请求的地址是http://localhost/APSS.kiosk/img/kiosk/License_Sample.jpg，返回404的核心原因是该路径下不存在目标图片文件。

正确存放位置 #

你需要将License_Sample.jpg存放到开发服务对应APSS.kiosk应用目录下的img/kiosk子文件夹中：

• 本地调试快速验证：找到本地开发服务映射的APSS.kiosk发布根目录，手动新建img/kiosk层级文件夹，将目标图片放入即可
• 适配项目源码规范：结合你当前编辑的文件路径E:\ESS\Trunk\APSS.src\lib\kiosk\src\adaptive\mobile\views\scanning_view.js，查找项目中与src目录平级的静态资源目录（通常命名为public、static或assets），在该静态资源目录下新建img/kiosk文件夹存放图片，确保项目打包构建后，图片会被输出到发布目录的img/kiosk/路径下。

校验方式 #

文件存放完成后，直接在浏览器访问http://localhost/APSS.kiosk/img/kiosk/License_Sample.jpg，如果能正常显示图片，说明路径配置正确，页面刷新后就不会再显示加载占位图标。

注意：如果你的项目配置了资源路径别名或者自定义静态资源前缀，需要对应调整代码中的引用路径，和构建工具的资源输出规则保持一致。

内容的提问来源于stack exchange，提问作者Rizvi Ahmed Zillhaz