wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.16k stars 106 forks source link

Images not appearing #149

Closed adrianmcli closed 4 years ago

adrianmcli commented 4 years ago

I followed the code examples for using an image as a node and also referenced #118 but still can't get this to work. Here is my parameters:

<Particles
        params={{
          particles: {
            shape: {
              type: "image",
              image: [
                {
                  src:
                    "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/high-voltage-sign_26a1.png",
                  height: 20,
                  width: 20
                }
              ]
            }
          }
        }}
      />

Live code here: https://codesandbox.io/s/stoic-darkness-bzrp5

What am I doing wrong in my config?

matteobruni commented 4 years ago

Hi @adrianmcli

By default particle size is set to 1 or 3 (I don't remember), the height and the width specified in the image options are used for ratio.

<Particles
        params={{
          particles: {
            shape: {
              type: "image",
              image: [
                {
                  src:
                    "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/high-voltage-sign_26a1.png",
                  height: 20,
                  width: 20
                }
              ]
            },
            size: {
              value: 20
            }
          }
        }}
      />

This configuration is what you needed, I just added the size options.

adrianmcli commented 4 years ago

Thanks, that worked. I hope this is better documented in the future.