如何从React中的YouTube搜索应用中获取图像？

Question

async function searchYouTube(query ) {
    query = encodeURIComponent(query);
    const response = await fetch("https://youtube-search-results.p.rapidapi.com/youtube-search/?q=" + query, {
        "method": "GET",
        maxResult: 2,
        "headers": {
            "x-rapidapi-host": "youtube-search-results.p.rapidapi.com",
            'X-RapidAPI-Key': '39c26367dbmsh777490f3d0910cfp1baab3jsn22fdcdd9ff8c'

        }
    });
    const body = await response.json();
    console.log("body",body);
    return body.items.filter(item => item.type === 'video');
}

在我的代码中，您可以看到，我可以获得任何信息期望的图像，您可以向我解释错误的代码

如何使用YouTube搜索结果API显示搜索结果的视频图像？ 另外，在下面的照片中，您可以看到我获取图像信息，但是在代码中，我无法显示

“ https://i.sstatic.net/rcr8d.png” alt =“在此处输入图像说明”>

function Search() {
    const [query, setQuery] = useState('bts');
    const [list, setList] = useState(null);
    const search = (event) => {
        event.preventDefault();
        searchYouTube(query).then(setList);
    };
              
    return (
        <div className="app">
            <form onSubmit={search}>
                <input autoFocus value={query} onChange={e => setQuery(e.target.value)} />
                <button>Search YouTube</button>
            </form>
            {list &&
            (list.length === 0 ? <p>No results</p>
                    : (
                        <ul className="items">
                            {list.map(item => (
                                <li className="item" key={item.id}>
                                    <div>
                                        <b><a href={item.link}>{item.title}</a></b>
                                        <p>{item.description}</p>
                                    </div>
                                    <ul className="meta">
                                        <li>By: <a href={item.author.ref}> 
                                         {item.author.name}</a></li>
                                        <li>Duration: {item.duration}</li>
                                    </ul>
                                    <img alt={item.link} src={item.thumbnails} />
                                    {console.log("image",item.thumbnails)}
                                </li>
                            ))}
                        </ul>
                    )
            )
            }
        </div>
    );
}

export default Search;

Answer 1

正如我在控制台中看到的那样，item.Thumbnails返回对象数组。
在该对象内部，您可能拥有一些属性，例如url或其他访问实际缩略图URL的属性。因此，您可能需要访问该属性：

<img alt={item.link} src={item.thumbnails[0].url} />