D3.js如何附加本地图像答案

【问题标题】：D3.js How to append local imageD3.js如何附加本地图像
【发布时间】：2021-01-05 20:21:09
【问题描述】：

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

但我使用的图像位于我的项目src/assets/img 或@/assets/img（ES6 import using at ('@')）内的本地文件夹中。

但我无法加载图像。如果我将 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);

【问题讨论】：

您是在尝试使用 html img 标签还是 SVG image 标签？您似乎在代码 sn-p 中来回切换。此外，您的问题似乎是如何从我的网络服务器提供本地内容？您使用的是哪个网络服务器？您是否尝试导航到 https://localhost:8080/src/assets/img/arrow.svg 以查看图像是否会在您的 javascript 代码之外加载？
我只是想显示 img 它是什么类型的 img 标签并不重要。我不想显示来自我的网络服务器的内容。这些图像位于 Vue 项目的 assets/img 文件夹中。但是当我将这些图像的位置放在我的 img 的 src 标记中时，在 html 中呈现的源是 ``localhost:8080/src/assets/img/arrow.svg`

标签： javascript d3.js

【解决方案1】：

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

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

【讨论】：

当我尝试这个时，我得到一个错误：“语法错误：'import' 和 'export' 可能只出现在顶层 (142:4)”
很高兴能帮到你。
对于未来遇到同样问题的人：在此示例中您可以使用svg:image，但只需将src 更改为href

【解决方案2】：

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

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

【讨论】：

这个来源在普通的img src上使用时是一样的。