显示图像的功能不起作用答案

【问题标题】：function to display an image doesn't work显示图像的功能不起作用
【发布时间】：2017-03-27 14:48:52
【问题描述】：

我有以下 d3 代码：

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

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

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

【问题讨论】：

您是否尝试将图像附加到 SVG 或 DIV？
static-a 是一个 div

标签： javascript d3.js selection

【解决方案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>

【讨论】：

【解决方案2】：

我猜你的意思是这样的：

append("<img>").attr("src", source);

或者只是这样做：

append($("<img>", {"src":source }));

【讨论】：

所以对于这两个我得到'InvalidCharacterError：字符串包含无效字符'并且图像没有加载，这意味着我没有根据我的理解正确调用选择？