kaboom.js failed load image

Question

I can't load image in kaboom.js .this my code files root D:\kaboom\src . this my image file root D:\kaboom\public\assets.

js code

import kaboom from 'kaboom';


kaboom({

  font: "sinko",

  background: [0, 0, 255,],
})

loadSprite("bean", "assets/ii.png");

// add a character to screen
add([
  // list of components
  sprite("bean"),
  pos(80, 40),
  area(),
]);

what I am mistake

Answer 1

Where is your index.html?

I use React to build this game, and set these public files adjoined index.html. Like this:

.
??? MarioGames
?   ??? sprites
?       ??? Items.png
?       ??? Mario.json
?       ??? Mario.png
?       ??? OverWorld.json
?       ??? OverWorld.png
?       ??? bigMushy.png
?       ??? brick.png
?       ??? castle.png
?       ??? cloud.png
?       ??? coin.png
?       ??? emptyBox.png
?       ??? enemies.json
?       ??? enemies.png
?       ??? ground.png
?       ??? hill.png
?       ??? pipe.png
?       ??? pipeBottom.png
?       ??? pipeTop.png
?       ??? questionBox.png
?       ??? shrubbery.png
??? favicon.ico
??? index.html
??? logo192.png
??? logo512.png
??? manifest.json
??? robots.txt

It's my solution.

    kaboom({
  background: [134, 135, 247],
  width: 320,
  height: 240,
  scale: 2,
  canvas: this.refs.canvas as any,
})

loadRoot('./MarioGames/sprites/')
loadAseprite('mario', 'Mario.png', 'Mario.json')
loadAseprite('enemies', 'enemies.png', 'enemies.json')