我怎样才能从 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？ 同样在下面的照片中，您可以看到我获得了图像信息，但是在代码中我无法显示它


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 returns 对象数组。在该对象中，您可能有一些属性，如 url 或其他东西来访问实际的缩略图 url。所以你可能需要访问属性:

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

我怎样才能从 Youtube 搜索应用程序中获取图像？

How can I get an image from Youtube search App in react?

javascript

reactjs

image

youtube-api

youtube-data-api