javascript - D3.js如何附加本地镜像

Question

我有这个项目，我需要在其中添加本地镜像。此时，可以使用 svg 图像和 xlink:href 添加位于 URL 上的图像。
但是我使用的图像位于我的项目内的本地文件夹中 src/assets/img或 @/assets/img (使用 at ('@') 的 ES6 导入)。
但是我无法加载图像。如果我将 src 属性添加到图像中，则 src 将被设置为 http://localhost:8080/@/assets/img/arrow.svg而不是项目中图像的实际来源。
如果我在 Chrome 控制台中检查 DOM 树，正常的 img 会如下所示:

虽然 D3js 附加的 img 没有正确插入，当我将鼠标悬停在 src 上时，它显示:http://localhost:8080/@/assets/img/arrow.svg d.data[2]包含实际图像的名称，例如'arrow.svg' 我也尝试过更改 src至xlink:src :

g.append("img")
      .attr("transform", function(d) {
        var x = arc.centroid(d)[0] - image_width / 2;
        var y = arc.centroid(d)[1] - image_height / 2;
        return "translate(" + x + "," + y + ")";
      })
      .attr("src", function(d) {
        return "@/assets/img/" + d.data[2];
      })
      .attr("width", image_width)
      .attr("height", image_height);

当图像位于 URL 上时，这是一个工作示例:

g.append("svg:image")
      .attr("transform", function(d) {
        var x = arc.centroid(d)[0] - image_width / 2;
        var y = arc.centroid(d)[1] - image_height / 2;
        return "translate(" + x + "," + y + ")";
      })
      .attr("xlink:href", function(d) {
        return d.data[2];
      })
      .attr("width", image_width)
      .attr("height", image_height);

Answer 1

您可以尝试以下方法，看看它是否有效:

.attr("src", function(d) {
    const imagePath = require("@/assets/img/" + d.data[2]);
    return imagePath;
  })