kaboom.js加载图片失败，请问代码或路径配置哪里存在错误？

核心问题原因 #

你的路径寻址逻辑不匹配项目的静态资源目录结构：

• 你的代码存放在src目录，图片存放在public/assets目录
• 你当前使用的相对路径assets/ii.png会默认从JS文件所在的src目录下查找资源，自然找不到对应图片

可直接落地的修复步骤 #

• 首先确认你是通过本地开发服务启动项目，不要直接双击打开本地HTML文件，否则会触发浏览器跨域限制导致资源加载失败
• 修改资源加载路径为绝对路径，或配置kaboom全局资源加载根目录，修改后代码如下：

import kaboom from 'kaboom';

kaboom({
  font: "sinko",
  background: [0, 0, 255,],
})

// 配置静态资源加载根路径为开发服务的根目录
loadRoot("/")
// 路径开头加/表示从根目录开始寻址，匹配public下的assets路径
loadSprite("bean", "/assets/ii.png");

// 往屏幕添加角色
add([
  sprite("bean"),
  pos(80, 40),
  area(),
]);

• 如果修改后仍然加载失败，排查图片文件名的大小写、后缀是否和代码中完全匹配，确认public/assets目录下确实存在ii.png文件

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