image does not work

[yob-yob]

I'm using Vue.JS I installed particle.js via NPM

window.particlesJS("Animations", { "particles":{ "number":{ "value":80, "density":{ "enable":true, "value_area":800 } }, "color":{ "value":"#ffffff" }, "shape":{ "type":["image","Star"], "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image":{ "src":"https://upload.wikimedia.org/wikipedia/commons/c/c4/Figure_rythmique_deux_double_croches_lien_haut.svg", "width":100, "height":100 } }, "opacity":{ "value":0.5, "random":false, "anim":{ "enable":false, "speed":1, "opacity_min":0.1, "sync":false } }, "size":{ "value":10, "random":true, "anim":{ "enable":false, "speed":40, "size_min":0.1, "sync":false } }, "line_linked":{ "enable":false, "distance":150, "color":"#ffffff", "opacity":0.4, "width":1 }, "move":{ "enable":true, "speed":1, "direction":"top", "random":false, "straight":false, "out_mode":"out", "bounce":false, "attract":{ "enable":true, "rotateX":600, "rotateY":1200 } } }, "interactivity":{ "detect_on":"canvas", "events":{ "onhover":{ "enable":false, "mode":"repulse" }, "onclick":{ "enable":false, "mode":"push" }, "resize":true }, "modes":{ "grab":{ "distance":400, "line_linked":{ "opacity":1 } }, "bubble":{ "distance":400, "size":40, "duration":2, "opacity":8, "speed":3 }, "repulse":{ "distance":200, "duration":0.4 }, "push":{ "particles_nb":4 }, "remove":{ "particles_nb":2 } } }, "retina_detect":true })

now the above Settings work .. as you can see particles.shape.type = ['image','Star'] but if I change that to particles.shape.type = 'image', it does not work.

Browser : Firefox Dev Edition OS : Fedora Linux

[crmolinaz]

can you share the code in jsfiddle.net? maybe i can help you

[Retsamikit]

Same Problem here. Shape works. Image does not work. Any Suggestions? Firefox, Windows.

[jbsmith731]

@yob-yob I've tried svg and had issues but png seems to work well

[matteobruni]

Try this library instead: https://github.com/matteobruni/tsparticles

You can set multiple images too: https://codepen.io/matteobruni/pen/bGdomGq

And for pngs: https://codepen.io/matteobruni/pen/XWmRooM