如何使用Fetch API從API顯示圖像？

Question

首先，我正在使用非官方Xbox API，並且試圖顯示網站中提供的端點示例CLICK HERE中的圖像。

因此，我使用一個帶有回調的按鈕來提取Fetch API函數：

 document.getElementById('getScreenshots').addEventListener('click', getScreenshots); function getScreenshots(){ // Get data from URL fetch('https://xboxapi.com/v2/screenshots/1144039928',{ headers: new Headers({ "X-Auth": "HERE-GOES-MY-API-KEY", "Content-Type": "application/json", }) }) .then((res) => res.json()) .then((data) => { let output = '<h5>List of Recent Screenshots</h5>'; data.forEach(function(screenshot){ output += ` <ul> <li>ID: ${screenshot.screenshotId}</li> <li>Published at: ${screenshot.datePublished}</li> <li><img src="${screenshot.uri}"></li> </ul> `; }); document.getElementById('screenshots').innerHTML = output; }) .catch((err) => console.log(err)) } 

  <button id="getScreenshots">Get Screenshots</button> <ul id="screenshots"></ul> 

但是每次我嘗試請求它時，圖像都不會顯示，並且控制台向我拋出每個圖像404錯誤。 這是我在說的：

有人可以幫我嗎？

提前致謝。

更新，這是我在使用郵遞員時獲得的json數據：

"thumbnails": [
    {
        "uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
        "fileSize": 0,
        "thumbnailType": "Small"
    },
    {
        "uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
        "fileSize": 0,
        "thumbnailType": "Large"
    }
],
"screenshotUris": [
    {
        "uri": "https://screenshotscontent-d5002.xboxlive.com/xuid-2535443387655711-private/29cd392a-6758-4926-8396-44aa77822ac6.PNG?sv=2015-12-11&sr=b&si=DefaultAccess&sig=5Is2Shl9m0c85yI0Vq%2BTRs3cuwYDvUR2BBWrD2%2FpkIw%3D",
        "fileSize": 1255362,
        "uriType": "Download",
        "expiration": "2018-08-29 04:51:56"
    }
],
"xuid": 2535443387655711,
"screenshotName": "",
"titleName": "Halo: The Master Chief Collection",
"screenshotLocale": "en-US",
"screenshotContentAttributes": "None",
"deviceType": "Durango",
"screenshotDetails": "https://xboxapi.com/v2/2535443387655711/screenshot-details/d1adc8aa-0a31-4407-90f2-7e9b54b0347c/29cd392a-6758-4926-8396-44aa77822ac6"

}，

Answer 1

screenshot.screenshotUris.uri將是未定義的，因為screenshot.screenshotUris是一個數組。 因此，您需要：

screenshot.screenshotUris[0].uri

或像

screenshot.screenshotUris.forEach(function(el) { ...el.uri... })