D3.js如何附加本地图像 [英] D3.js How to append local image

问题描述

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

I have this project where I need to add local images. At this point it is possible to add images that are located on a URL using svg images and xlink:href.

但是我正在使用的图像位于我的项目 src/assets/img 或 @/assets/img (ES6导入中使用('@')).

But the images I am using are located in a local folder inside my project src/assets/img or @/assets/img(ES6 import using at ('@')).

但是我无法加载图像.如果我将src属性添加到图像，则src被设置为 http://localhost:8080/@/assets/img/arrow.svg ，而不是项目中图像的实际来源.

But I cannot get the images to load in. If I add the src attribute to the image the src is being set to http://localhost:8080/@/assets/img/arrow.svg and not to the actual source of the image in the project.

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

If I inspect the DOM tree in the Chrome console a normal img would look like this:

虽然未正确插入由D3js附加的img，当我将鼠标悬停在src上时，它显示: http://localhost:8080/@/assets/img/arrow.svg

While the img that is being appended by D3js is not being inserted correctly and when I hover over the src it shows: http://localhost:8080/@/assets/img/arrow.svg

d.data [2] 包含实际图像的名称，例如'arrow.svg'我也尝试将 src 更改为 xlink:src :

The d.data[2] contains the name of the actual image e.g. 'arrow.svg' I have also tried to change src to 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上时，这是一个有效的示例:

This is a working example when the images are located on a 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);

推荐答案

您可以尝试以下方法，看看是否可行:

can you try the following and see if it works:

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

这篇关于D3.js如何附加本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！