Javascript D3.js如何附加本地图像

我有这个项目，我需要添加本地图像。此时，可以使用svg图像和xlink:href添加位于URL上的图像

但是我正在使用的图像位于我的项目

src/assets/img

或

@/assets/img

（ES6导入使用at（'@'））中的本地文件夹中

但我无法将图像载入。如果我将src属性添加到图像中，src将被设置为

http://localhost:8080/@/assets/img/arrow.svg

，而不是项目中图像的实际来源

如果我在Chrome控制台中检查DOM树，正常的img将如下所示：

当D3js附加的img没有正确插入时，当我将鼠标悬停在src上时，它显示：

http://localhost:8080/@/资产/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);

---

您不是返回了错误的src吗？

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

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

---

错误的源是什么意思？此源在正常img src上使用时是相同的。您试图使用html

img

标记还是SVG

image

标记？您似乎在代码片段中来回切换。另外，您的问题似乎是如何从web服务器提供本地内容？您正在使用哪个web服务器？您是否尝试导航到

https://localhost:8080/src/assets/img/arrow.svg

要查看图像是否会加载到您的javascript代码之外，我只想向img显示它，不管它是什么类型的img标记。我不想显示web服务器上的内容。图像位于Vue项目的

资产/img

文件夹中。但是当我把这些图像的位置放在我的img的src标记中时，在html中呈现的源代码是```当我尝试这样做时，我得到了一个错误：“语法错误：'导入'和'导出'可能只出现在顶层（142:4）”，谢谢这修复了它！我很高兴这对您有所帮助。对于未来有相同问题的人：在本例中，您可以使用

svg:image

，但只需将

src

更改为

href

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