How to do with type: 'image' it's not loading on screen where as type:'circle' works

[fenil23398]

shape: { // type: 'circle', type: 'image', image: [ { src: 'https://www.kasandbox.org/programming-images/avatars/leaf-blue.png', width: 100, height: 100, replaceColor: false, }, ], },

[puap]

I have a similar problem

I have tsparticles/react up and running well, but I am trying to put in images instead of the built in shapes and I can't seem to get it to work.
I added in import { loadImageShape } from "@tsparticles/shape-image";
and
initParticlesEngine(async (engine) => {
//await loadSlim(engine);
console.log("loading particles");
await loadImageShape(engine);
await loadAll(engine);
});

To the initialization but can't seem to get it to work. This older version demo seems to work
https://codesandbox.io/p/sandbox/happy-pike-2xqn6y

Thanks for any help.

[matteobruni]

https://github.com/tsparticles/tsparticles/blob/9580ad78487d812b2fae64e2da5d6c61a2db8d97/utils/configs/src/i/imagesDirections.ts#L58

shape.image doesn't exist anymore, shape.type and shape.options are the only things kept, for consistency. Check this configuration to see how to customize the image shape

[puap]

Perfect, thank you for the answer that worked, and it also looks like I don't need the @tsparticles/shape-image library either.

This worked for me.

      shape: {
        type: "image",
        options: {
          image: [
                {
                    src: "https://particles.js.org/images/fruits/apple.png",
                    width: 32,
                    height: 32,
                },
          ],
        }
      },