Question

有人可以通过简单的方式建议在JSON网址上显示HTML页面上的电子邮件吗？我试图运行搜索，但每个人的建议都与人们拥有的一些复杂代码有关。我可以从JSON URL中读取数据，但我需要知道如何代替图像的url在我的页面中显示图像本身。

JSON文件具有以下位置：

{"icon_url":"http://icons.wxug.com/i/c/k/icon.gif"}

如果我使用这种JS格式，它只是将URL数据读入我的HTML网站。

document.getElementById('image').innerHTML = something.icon_url;

简单代码是什么，让这个gif在我的测试网站上显示为图片？

Answer 1

无需更改innerHTML属性。而是使用DOM API附加图像。

//Assuming json_data is a variable containing the JSON in a string format.

json_data = JSON.parse(json_data);
var image = document.createElement("img");
image.onload = function() {
    document.getElementById("image").appendChild(image);
}
image.src = json_data.icon_url;

以下是显示此功能的快速代码段：

//You will probably fetch this not set it manually.
json_data = '{"icon_url": "http://i0.kym-cdn.com/photos/images/original/000/581/296/c09.jpg"}';
json_data = JSON.parse(json_data);
var image = document.createElement("img");
image.onload = function() {
    document.getElementById("image").appendChild(image);
}
image.src = json_data.icon_url;

<!DOCTYPE html>
<html>
  <body>
    <div id="image"></div>
  </body>
</html>

将一个图像从JSON URL读取到HTML的简单方法

1 个答案: