JavaScriptd3如何从本地文件插入图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (910)

我把最后两行改为:

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

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

Original Post

我无法通过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')


}

};

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

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

提问于
用户回答回答于

似乎你希望使用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>

扫码关注云+社区

领取腾讯云代金券