Html rerendering on drag

[ayberkdikcinar]

Hi,

I have a problem that is about rendering some html for the nodes. In my html, the nodes actually consist of an image, text and some specified colors. And the images are taken from the internet via .src

Here is the code that I mentioned above;

nodeThreeObject={(node) => {
       const nodeContainer = document.createElement("div");
       nodeContainer.className = "node-container";

       const nodeEl = document.createElement("div");
       nodeEl.className = "node-label";
       nodeEl.textContent = node.name;
       if (node.nodeType === "lifecycle" && node.deletedAt) {
         nodeEl.style.color = NodeStyling[node.nodeType].deletedColor;
       } else {
         nodeEl.style.color = NodeStyling[node.nodeType].color;
       }

       nodeEl.style.fontSize = NodeStyling[node.nodeType]?.fontSize;
       const imgElement = document.createElement("img");
       imgElement.className = "node-image";
       imgElement.textContent = node.name;
       imgElement.src = node.imageUrl || ""; //TODO: extra refetches happening on the graph when I change locations of the nodes (dragging).

       nodeContainer.appendChild(imgElement);
       nodeContainer.appendChild(nodeEl);

       return new CSS2DObject(nodeContainer);
     }}
     

It refetches the images on dragging. I want to fetch images only 1 time (when initial render happens ) and use them until I change them manually.

Is there any solution for that? Im also not sure the problem is about 3d-force-graph. However, I need some answers for this.

I will be apporociate for your helps.