Closed erebusstudio closed 4 years ago
If your bundler is creating an url from your import, just use
"url": deer
Check this example (from the library demo repository).
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
@Wufe I can second the error where imported images do not show up when bundler is creating url from import.
@alexieyizhe Please provide example code
Here's a rough example of a config with imported images @Wufe:
import { CircleParticle, SquareParticle } from "../images";
const particlesConfig = {
particles: {
number: {
value: 25,
density: {
enable: true,
value_area: 1000,
},
},
line_linked: {
enable: false,
},
move: {
speed: 1,
out_mode: "out",
},
shape: {
type: ["images"],
images: [
{
src: CircleParticle, // this will NOT show up
height: 10,
width: 10,
},
{
src: SquareParticle, // this will NOT show up
height: 10,
width: 10,
},
{
src: "/square.svg", // this WILL show up
height: 10,
width: 10,
},
{
src: "/zigzag.svg", // this WILL show up
height: 10,
width: 10,
},
],
},
color: {
value: "#CCC",
},
size: {
value: 10,
random: true,
},
},
retina_detect: false,
};
@alexieyizhe Make sure the content of CircleParticle and SquareParticle is a string, containing a reachable url.
For example, if your environment is hosting the page at http://localhost:8080
and the CircleParticle variable contains ../image.jpg
, the resulting url would be http://localhost:8080/../image.jpg
( which is not reachable).
If your bundler creates an image url like /image.38cfa92[..].jpg
and it is reachable at http://localhost:8080/image.38cfa92[..].jpg
, it will work.
@Wufe I believe that CircleParticle
and SquareParticle
are valid string image URLs. I've imported them in other components and used them in cases like <img src={CircleParticle} />
with no issue.
@alexieyizhe Can you provide a reproducible example within CodeSandbox ?
had some issues here as well. At first ["images"], didnt seem to work. I changed to simply "image" with success, but once I changed back to ["images"] it started working. curious... here's my working config:
particles: {
number: {
value: 14,
density: {
enable: true,
value_area: 800,
},
},
color: {
value: "#333333",
},
shape: {
type: "images",
stroke: {
width: 3,
color: "#B7046B",
},
polygon: {
nb_sides: 3,
},
images: [
{
src: SmallTriangleSrc,
width: 20,
height: 20,
},
{
src: PinkTriangleSrc,
width: 20,
height: 20,
},
],
},
opacity: {
value: 0.08,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 45,
random: true,
anim: {
enable: false,
speed: 20,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: false,
},
move: {
enable: true,
speed: 1.5,
direction: "bottom",
random: false,
straight: true,
out_mode: "out",
bounce: false,
attract: {
enable: false,
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,
}```
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Images work if you write their full url, but I cannot find how to use imported images for the polygon url.
Example :
This doesn't work. Is there a method to automatically add the link to the imported images to the "url" parameter ?
Thanks a lot in advance.