如何从 Youtube 搜索应用程序中获取图像?

帮助
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 Search Results 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;
智码

正如我在控制台中看到的,item.thumbnails返回一个对象数组。在该对象内,您可能有一些属性url或其他东西来访问实际的缩略图 url。因此,您可能需要访问该属性:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从YouTube iframe获取YouTube缩略图?

如何从YouTube获取频道ID?

如何从YouTube API获取YouTube视频缩略图?

如何获取YouTube频道所有大小的YouTube视频的图像?

如何从另一个应用程序的通知中获取图像?

如何直接从Android应用程序打开Youtube视频链接?

如何将YouTube视频嵌入Ionic 4应用程序

如何在应用程序中播放Youtube实时流视频?

如何从图库中获取图像,裁剪图像并将其保存在应用程序中

youtube youtube搜索如何获取“链接”?

如何在我的flutter应用程序中添加带有视频的多个youtube播放列表?

如何使用bash强制Google / youtube搜索?

如何在不离开iOS 7应用程序的情况下播放YouTube视频

如何在WS应用程序中获取图像源

如何在Windows Store 8.1和Windows Phone 8.1应用程序中显示Youtube提要?C#

如何从Mac OS X和启动板删除Chrome的捆绑应用程序?Gmail,Google云端硬盘,Google搜索,YouTube

如何获取YouTube频道的YouTube订阅者的订阅列表?

如何在单页应用程序中重新获取图像?

如何从youtube响应中获取totalResults?

如何管理youtube中的视图?

单击带有在youtube中搜索的查询的按钮后,如何从另一个应用程序打开Youtube应用程序?

应用程序被杀死后,如何从图库中获取图像?

通过 Youtube api 搜索后如何获得 Youtube 视频

如何暂停或停止在后台播放的 ionic youtube 应用程序

如何通过谷歌应用程序脚本中的 url 从图像中获取 EXIF?

如何在 vb.net 应用程序中嵌入 Youtube 视频?

如何在谷歌应用程序脚本中的表单项中获取图像

使用python搜索视频后如何获取YouTube视频的全名?

如何在 youtube 上搜索视频并获取与 python 的链接