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;
uj5u.com熱心網友回復：
正如我在控制臺中看到的，item.thumbnails回傳一個物件陣列。在該物件內，您可能有一些屬性url或其他東西來訪問實際的縮略圖 url。因此，您可能需要訪問該屬性：
<img alt={item.link} src={item.thumbnails[0].url} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/462992.html
標籤：javascript 反应 图片 youtube-api youtube-数据-api
上一篇：谷歌云函式：functions.https.onCall回傳null但值在日志中正確顯示
下一篇：將路徑和哈希拆分為2個不同的變數