Javascript 如何从api获取和渲染图像？

我有一个api，它由一个对象组成，该对象包含嵌套在其中的jpeg链接数组。我想将每个图像渲染到HTML文档中，但是我得到一个错误

index.js:19承诺类型中未捕获错误：无法读取属性 未定义的“forEach” 地址：addDogs index.js:19 索引js:30

我假设一旦我们使用链接获取对象，我们提取该对象内的jpeg链接数组，并对其执行forEach方法。不管看起来我错了，有人能帮我一下吗？下面是我的代码，其中包括HTML文档、JavaScript代码和实际的api

HTML文件

---

你似乎有一个不需要的循环。addDogs函数应该更像：

function addDogs(dogs) {
    dogs.message.forEach((dog) => addDog(dog))
}

它基本上转换为获取dogs对象的message属性，并对其每个元素调用addDog

此外，此时无需访问addDog中的.message属性，因为该函数中的dog参数已经是数组的一个元素。因此，这可能成为：

tr.innerHTML = `<img src="${dog}">`

---

请注意，我在其周围添加了引号，@Phil说您的HTML非常混乱是对的。

您的函数addDog中似乎有一个错误；本质上，您希望它是一个带有消息字段的对象，但它只是一个字符串，因此要使其正常工作，您可能只需要修改使用它的方式，例如：

函数addDogimgUrl{ const tr=document.createElement'tr' tr.innerHTML=`` dogsContainer.appendr } 这是因为您的负载有一个图像URL数组，但您似乎假设它们是对象

编辑：

实际上，您的addDogs函数似乎也有一个错误。 我建议您将它们合并为以下内容：

函数addDogsdogs{ dogs.message.forEachimg=>functionimg{ const tr=document.createElement'tr' tr.innerHTML=`` dogsContainer.appendr } }

---

OP的appDog函数似乎希望对象具有message属性，因此可能还有一些工作要做。我将编辑我的答案。我注意到还有一大堆其他问题也对这个问题进行了评论，尽管您的内联属性值有问题，但您的答案没有问题。我将使用const img=document.createElement'img'；img.src=dog；。我还将创建一个新的应用程序，并将图像附加到该应用程序

{
  "status": "success",
  "message": [
    "https://images.dog.ceo/breeds/komondor/n02105505_4290.jpg",
    "https://images.dog.ceo/breeds/schipperke/n02104365_8190.jpg",
    "https://images.dog.ceo/breeds/entlebucher/n02108000_3306.jpg",
    "https://images.dog.ceo/breeds/keeshond/n02112350_6861.jpg"
  ]
}

function addDogs(dogs) {
    dogs.message.forEach((dog) => addDog(dog))
}

tr.innerHTML = `<img src="${dog}">`