您需要通过特定 id 获取带有图像和名称的 div
let characterWrap = document.querySelector('#characters-wrap')
const url = 'https://rickandmortyapi.com/api/character/'
async function getCards(url) {
try {
const response = await fetch(url);
return await response.json();
} catch (e) {
console.error(`Something is bad ---> ${e}`);
}
}
getCards(url)
.then(({ results }) => {
results
.map(({ id, name, status, image }) => {
const indetifier = Promise
results.forEach(({ id }) => {
const uCardOfCharthers = document.createElement('div')
image = document.createElement('img')
image.src = results
uCardOfCharthers.appendChild(image)
characterWrap.appendChild(uCardOfCharthers)
uCardOfCharthers.innerHTML =
`<img src='${image}' </img>
${name}
${status}`
})
const uCardOfCharthers = document.createElement('div')
characterWrap.appendChild(uCardOfCharthers)
uCardOfCharthers.innerHTML =
`${image}
${name}
${status}`
})
})
`
在我看来,您不小心在不需要的地方编写了额外的迭代和操作。带有结果的数组被整理出来,然后在这个迭代中再次整理出结果,已经只解构了 id。至少,这并不好。+ 你用这一行重新定义了图片的 url
image = document.createElement('img')