如何使用 Fetch API 从 API 显示图像？答案

【问题标题】：How to display images from API using Fetch API?如何使用 Fetch API 从 API 显示图像？
【发布时间】：2019-02-02 17:58:06
【问题描述】：

首先，我正在使用Unofficial 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 错误。这就是我所说的：

有人可以帮我解决这个问题吗？

提前致谢。

更新，这是我使用 Postman 时得到的 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"

【问题讨论】：

您确定screenshot.uri 已定义吗？能否提供 API 响应 JSON？
实际上是错误的，正确的端点是 screenshot.screenshotUris.uri 但我每张图片都会得到 404...检查我更新的问题。
screenshot.screenshotUris.uri 将未定义，因为 screenshot.screenshotUris 是一个数组。所以你需要screenshot.screenshotUris[0].uri或者像screenshot.screenshotUris.forEach(function(el) { ...el.uri... })这样的循环
天啊，我自己永远也想不通。十分感谢。您可以复制并粘贴您的评论以将其标记为答案吗？....取决于您，但现在已解决。
当然，我已经添加了答案。

标签： javascript jquery html fetch-api

【解决方案1】：

screenshot.screenshotUris.uri 将未定义，因为 screenshot.screenshotUris 是一个数组。所以你需要：

screenshot.screenshotUris[0].uri

或者像做一个循环

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

【讨论】：