如何在SigmaJS图的节点中添加图片？

问题分析 #

你需要在新版本SigmaJS的节点内显示图片，当前代码存在图片路径解析问题，可简化为仅实现5个带相同图片的节点需求。

修正后的代码 #

以下是适配新版本SigmaJS的完整Vue组件代码，专注实现目标功能：

<style scoped>
.main {
  height: 100vh;
  width: 100vw;
  position: relative;
}
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: 2px solid black;
}
</style>

<template>
  <div class="main">
    <div ref="container" id="container"></div>
  </div>
</template>

<script>
import Graph from "graphology";
import Sigma from "sigma";
import getNodeProgramImage from "sigma/rendering/webgl/programs/node.image";
import ForceSupervisor from "graphology-layout-force/worker";
// 导入assets目录下的图片资源
import cityImage from "../assets/city.png";

export default {
  name: "GraphView",
  mounted() {
    this.rendering();
  },
  methods: {
    rendering() {
      const container = this.$refs.container;
      const graph = new Graph({ multi: true });

      // 配置图片节点的统一参数
      const imageNodeConfig = {
        size: 15,
        type: "image",
        image: cityImage,
        color: "#FA4F40"
      };

      // 添加5个带相同图片的节点
      ["Node1", "Node2", "Node3", "Node4", "Node5"].forEach(nodeId => {
        graph.addNode(nodeId, {
          ...imageNodeConfig,
          label: nodeId
        });
      });

      // 初始化节点位置
      graph.nodes().forEach((node, i) => {
        const angle = (i * 2 * Math.PI) / graph.order;
        graph.setNodeAttribute(node, "x", 100 * Math.cos(angle));
        graph.setNodeAttribute(node, "y", 100 * Math.sin(angle));
      });

      // 初始化Sigma渲染器，注册图片节点程序
      const renderer = new Sigma(graph, container, {
        nodeProgramClasses: {
          image: getNodeProgramImage()
        },
        renderEdgeLabels: true
      });

      // 启动力导向布局
      const layout = new ForceSupervisor(graph);
      layout.start();
    }
  }
};
</script>

关键修复点 #

1. 图片路径处理：通过import导入Vue项目assets目录下的图片，确保Webpack能正确解析资源路径，避免相对路径导致的404错误。如果图片放在public目录下，可直接使用绝对路径（如"/city.png"），无需导入。
2. 节点类型与程序注册：必须给图片节点设置type: "image"，同时在Sigma初始化时注册对应的getNodeProgramImage()渲染程序，这是新版本SigmaJS渲染图片节点的核心配置。
3. 简化代码结构：提取统一的图片节点配置，循环创建5个目标节点，聚焦需求本身。

注意事项 #

• 优先使用PNG/JPG格式图片，SVG格式需确保无跨域问题且能被WebGL正确渲染。
• 若图片仍不显示，可通过浏览器开发者工具检查网络请求是否报错（路径问题），或查看WebGL控制台是否有渲染错误。

内容的提问来源于stack exchange，提问作者bob