javascript - 显示图像的功能不起作用

Question

我有以下 d3 代码:

function show_image(source) {
 d3.select("#static-a").append("image").attr("src", source);
}

我知道选择的第一部分是正确的，并且调用函数时源变量是有效的本地相对引用路径:

show_image("../images/image_netflix.png");

Answer 1

使用img而不是image。

d3.select("body")
  .append("button")
  .on("click", function() {
   show_image("http://www.logosdesigners.com/images/img_example.jpg");
  })
  .text("Show Image");

function show_image(source) {
  d3.select("#static-a").selectAll("img").remove(); //Removing existing images
  d3.select("#static-a").append("img").attr("src", source); //Appending new image
}

img {
  width: 200px;
  height: 200px;
}

#static-a {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid teal;
}

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