Javascript 想从API中提取图像，但我的代码只显示文本。。我能知道怎么了吗？

您提供的代码存在一些问题：

您正在for循环中使用

document.getElementById（“demo”）

。实际上，您一次又一次地查询同一个元素，并且总是得到相同的结果。如果只需要更新单个元素，只需将其放置在for循环外部，将其保存到变量并在循环内部使用即可。如果您试图更新多个元素，那么可能应该以不同的方式使用动态类名或查询元素

对于图像，不应使用innerHTML。相反，您可以使用和HTML

或

，并将

背景图像

的css规则应用于图像的url

您没有正确使用xhr。您正在尝试在响应发送之前访问它。查看如何实例化和使用xhr对象的示例：

---

camera.image

解析为字符串

“https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg“

，因此

document.getElementById（“demo”）.innerHTML=camera.image

只需将

元素的内容设置为以下字符串：

{"items":[{"timestamp":"2018-12-20T21:59:41+08:00","cameras":[{"timestamp":"2018-12-20T21:59:21+08:00","image":"https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg","location":{"latitude":1.27414394350065,"longitude":103.851316802547},"camera_id":"1501","image_metadata":{"height":240,"width":320,"md5":"7bcfabb38b60a18f1380bffca095d6c0"}},{"timestamp":"2018-12-20T21:59:21+08:00","image":"https://images.data.gov.sg/api/traffic-images/2018/12/06c05520-98b6-4086-b691-1bb54ed90482.jpg","location":{"latitude":1.27135090682664,"longitude":103.861828440597},"camera_id":"1502","image_metadata":.....

Javascript:

<img id="demo" src="">

---

这个看起来怎么样？当然，您必须实现AJAX调用自己等等，但是您明白了吗

编辑 你有没有想过要去看电影？如果您想使用

xhr

，这很公平，但是fetch只是实现

xhr

的一种更新更好的方法

consturl='1〕https://api.data.gov.sg/v1/transport/traffic-images';
让我们通过，btn；
//去获取数据，回报承诺。
const getData=（）=>fetch（url）.then（imgs=>imgs.json（））；
//输出图像。
const processImage=img=>{
const el=document.createElement（“img”）；
el.setAttribute（“src”，img.image）；
批准追加（el）；
};
//迭代getData函数中的数据。
const进程=数据=>{
approt.innerHTML=“”；
forEach（o=>o.cameras.forEach（img=>processImage（img））；
};
//将事件handler绑定到事件。
const bindEvents=（）=>btn.onclick=（）=>getData（）。然后（进程）；
//一个简单的函数来启动一切。
常量启动=（）=>{
log（'Starting…'）；
btn=document.getElementById（“loadDoc”）；
approt=document.getElementById（“demo”）；
bindEvents（）；
};
//启动应用程序。
发射（）
图像测试
您的代码中有几个问题：


您根本不定义
xhr
。您需要创建一个
XMLHttpRequest
对象来调用
send（）
当请求完成时，您没有为XHR定义执行的
onload
处理程序，您的逻辑只是放在函数的根目录中，因此只会导致错误
您正在数组中的

循环中为..使用

。对于

循环使用普通的

，或者更好的是使用
forEach（）
您正在更新
#demo
元素的文本，但未设置
img的
src

您需要为返回的JSON中的每个项目创建一个新的
img
元素，然后将其添加到DOM中，可能是在
#demo
元素中
您使用的是一个内联事件处理程序，
onclick
，应该避免使用它。改用不引人注目的事件处理程序，例如
addEventListener（）

记住所有这些要点，尝试以下方法：


document.querySelector（'#load'）.addEventListener（'click'，function（）{
var div=document.getElementById（'demo'）；
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”https://api.data.gov.sg/v1/transport/traffic-images“，对）；
xhr.onload=函数（）{
var response=JSON.parse（this.responseText）；
response.items.forEach（函数（项）{
项目.摄像机.forEach（功能（摄像机）{
var img=document.createElement（'img'）；
img.src=camera.image；
儿童分部（img）；
var p=document.createElement（'p'）；
p、 innerText=camera.location.latitude+'，'+camera.location.latitude；
儿童组（p）；
});
});
};
xhr.send（）；
});
图像测试
它不是图像标签，所以。。。。。你将如何用HTML制作图像？同样的规则也适用于……嗨，epascarello，在html中我们是这样做的，但在本例中我是这样做的document.getElementById（“demo”）.img？？因为图片的url是动态的，因为它们是实时的提要，所以我对这里的语法很困惑。我实际上如何利用它们呢？对不起，如果我的问题看起来很业余，因为我对这门语言还很陌生。。通过调用此api，您可以通过访问src属性将每个url分配给img.src，如下所示：
document.getElementById（“myImage”）.setAttribute（“src”，dynamiccurl）请记住，由于您有多个URL，每个URL都应分配给不同的img元素，因此使用ID不是一个好选项（仅举个例子）。这意味着dynamicUrl将是一个包含不同URL的变量？是的。更准确地说，dynamiccurl是一个变量，每次都可能是不同的。我假设它将在一个循环中检查您从服务器得到的响应，然后将每个url分配给DOM中不同的img标记（更好的是，仅在需要时创建img元素，最后将其附加到DOM）。嗨，jack！我能问一下这有什么用吗？const getData=（）=>我不确定这个操作符是如何工作的，所以。。getData获取我的数据，我初始化一个新的对象，该对象将返回数据。items？对不起，因为我对这门语言真的很陌生！！非常感谢你的帮助！这是一个很好的例子。请注意，它们在IE中根本不起作用。嗨@OpkkoLim，语法是ES6编写所谓lambda函数的方法。。。但是是的，本质上，
Promise
对象是这样一种说法，
这样做直到完成为止，
<p id="demo">
    https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg
</p>

<img id="demo" src="">

$('#demo').attr('src', camera.image);