Как отображать изображения из API с помощью Fetch API?

Question

Прежде всего, я работаю с Неофициальным API-интерфейсом Xbox и пытаюсь отобразить изображения из примера конечной точки НАЖМИТЕ ЗДЕСЬ , предоставленного на веб-сайте.

Итак, я использую кнопку с обратным вызовом для функции 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, которые я получаю при использовании Postman:

"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... })