我正在嘗試從 public-apis 獲取貓的隨機圖像到我的 index.html （圖片未加載）

Question

好像有點用，就是加載不出來圖片

let element2 = document.getElementById("button3"); 
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.innerHTML = '<img src="${data.file}"/>'
    })

});

Answer 1

HTML

<img src="" id="cat_result"/>

我相信，您的 html 圖像標簽是這樣的。 您可以使用 setAttribute 代替 innerHTML。

JS

let element2 = document.getElementById("button3"); 
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.setAttribute('src', data.file);
})

希望，它會奏效。

Answer 2

模板文字需要在它們周圍有反引號（``）。 更多關於他們在這里

 let element2 = document.getElementById("button3"); element2.addEventListener("click", () => { let cat_result = document.getElementById("cat_result"); fetch('https://aws.random.cat/meow').then(res => res.json()).then(data => { cat_result.innerHTML = `<img src="${data.file}"/>` }) });

 <button id="button3">click</button> <div id="cat_result"></div>