Question

更新：我将最后两行更改为以下内容。

.append('img')
    .attr('src','images/testimage.png')

但图像没有出现。在它的位置有一个破碎的图像，所以我相信文件路径语法不正确或者还有其他我没有看到的东西。

原帖

我无法通过js渲染存储在本地目录中的图像。最后2-3行代码就是问题所在。我不能100％确定这是否是文件路径的正确表示法（我认为它基于此thread。

d3.select("#solve")
  .append('h2')
  .text("Solve.")

for (var i = 0; i < response.length; i++){

    d3.select("#question")
          .append('p')
          .text(response[i]['id'])
          .append('p')
          .text(response[i]['statement'])
          .append('li')
          .text(response[i]['a1'])
          .append('li')
          .text(response[i]['a2'])
          .append('li')
          .text(response[i]['a3'])
          .append('li')
          .text(response[i]['a4'])
          .append('li')
          .text(response[i]['a5'])
          .append('div')
          .append('svg:image')
          .attr('href', 'file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png')


}

};

当我检查HTML元素时，这就是我得到的。但是网页上没有图片。

<image href="file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png"></image>

感谢任何帮助，谢谢。

Answer 1

您似乎想要使用d3js为div选择添加图像元素。您不需要附加svg来执行此操作，您可以直接将img元素附加到div：

const domElement = d3.select("#question");
const imagePath = 'https://cdn.dribbble.com/users/22018/screenshots/2456036/d3_1x.png';
domElement.append('img').attr('src', imagePath);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="question"></div>

Answer 2

而不是：

.append('svg:image')
.attr('href', 'file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png')

使用它（xlink：href属性代替href）：

.append('svg:image')
.attr("xlink:href", function() {return "file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png"})
.attr('width', "50")
.attr('height', "50")

Javascript d3从本地文件插入图像

2 个答案: