为什么我不能在fetch .then中添加图像src属性？

Question

dropdown.addEventListener('change', event => {
fetch(`https://dog.ceo/api/breed/${dropdown.value}/images/random`)
    .then(response => {
        if (response.ok) {
            return response.json()
        }
        throw new Error('Bad HTTP')
    })
    .then(jsonData => {
        let image = document.createElement('image')
        let src = jsonData.message
        image.src = src;
        image.className = 'newClass'
        console.log(src)
        console.log(image)
        result.appendChild(image)
    })

}）

console.log image

图像是我的consol.logs，添加的类很好，但是src失败，有人可以解释我在做什么错：（？

Answer 1

问题是创建"image"而不是"img"。image标签将创建: The obsolete Image element而不是<img>

根据MDN

  

创建没有src属性的元素会导致HTMLElement对象具有本地元素名称"image"

HTMLElement没有任何src属性，因此未设置src属性

不正确

let image = document.createElement('image')
image.src ="something"

console.log(image.outerHTML)

创建document.createElement('image')时不会创建ImageElement

正确

let image = document.createElement('img')
image.src ="something"

console.log(image.outerHTML)