Images are not show in nodes in NextJS

[syedzayyan]

I am setting up a Graphology Graph and trying to display it using React Sigma and I have registered the nodeProgram. Here are some relevant parts of my code:

Here's how I have set SigmaContainer:

      <SigmaContainer
        style={{ height: "600px", width: "100%" }}
        graph={graph}
        settings={{
          nodeProgramClasses: { image: getNodeProgramImage() },
          defaultNodeType: "image",
          defaultEdgeType: "arrow",
          labelDensity: 0.07,
          labelGridCellSize: 60,
          labelRenderedSizeThreshold: 15,
          labelFont: "Lato, sans-serif",
          zIndex: true,
        }}
      >
        <GraphEvents />
      </SigmaContainer> 

And here is how I setup the nodes:

  const graph = new MultiDirectedGraph();
  for (let i = 0; i < network.nodes.size(); i++) {
    try {
      graph.addNode(i.toString(), {
        molCounts: network.molCounts.get(i),
        size: network.molCounts.get(i),
        smiles: network.nodes.get(i),
        nodeType: smilesList.includes(network.nodes.get(i))
          ? "whole"
          : "fragment",
        type: "image",
        image: "./unknown.svg",
      });
    } catch {
      console.error("Error in adding node to graph");
    }

I have taken the SVG file from this repo and when I change the SVG file to something else that does not exist, I see an error so the image is being searched but it is just not displayed.

Here's a screenshot:

• React-sigma-v2 version: 3.4.2
• Sigma.js version : 2.4.0
• Graphology version : 0.25.4
• Operating system: Macbook Pro Apple Silicon
• Web browser: Firefox