在React粒子JS中看不到图像

Question

我正在使用React Particle JS。我想让图像在粒子之间显示(如here - https://rpj.bembi.dev/#images)，但看不到图像，只显示气泡。路径是正确的。我正在通过useEffect钩子包含pathseg.js脚本。

import Particles from "react-particles-js";
export default function Banner() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.rawgit.com/progers/pathseg/master/pathseg.js";
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  return (
      <Particles
        params={{
          particles: {
            number: {
              value: 8,
              density: {
                enable: true,
                value_area: 800,
              },
            },
            line_linked: {
              enable: false,
            },
            move: {
              speed: 1,
              out_mode: "out",
            },
            shape: {
              type: ["image", "circle"],
              image: [
                {
                  src: "https://image.flaticon.com/icons/png/512/29/29495.png",
                  height: 20,
                  width: 20,
                },
              ],
            },
            color: {
              value: "#CCC",
            },
            size: {
              value: 30,
              random: false,
              anim: {
                enable: true,
                speed: 4,
                size_min: 10,
                sync: false,
              },
            },
          },
          retina_detect: false,
        }}
      />
  );
}

Answer 1

我认为使用带有image形状类型的数组有一个错误，如果你使用带有数组的images，它是有效的，image只处理单个对象，但我会检查它

import { useEffect } from "react";
import Particles from "react-particles-js";

export default function Banner() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.rawgit.com/progers/pathseg/master/pathseg.js";
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  return (
      <Particles
        params={{
          particles: {
            number: {
              value: 8,
              density: {
                enable: true,
                value_area: 800,
              },
            },
            line_linked: {
              enable: false,
            },
            move: {
              speed: 1,
              out_mode: "out",
            },
            shape: {
              type: ["image", "circle"],
              image: {
                  src: "https://image.flaticon.com/icons/png/512/29/29495.png",
                  height: 20,
                  width: 20,
                },
            },
            color: {
              value: "#CCC",
            },
            size: {
              value: 30,
              random: false,
              anim: {
                enable: true,
                speed: 4,
                size_min: 10,
                sync: false,
              },
            },
          },
          retina_detect: false,
        }}
      />
  );
}

这是有效的，如果您需要多个图像，请将image更改为images