无法显示来自 youtubev3 api 的缩略图答案

【问题标题】：unable to show thumbnails from youtubev3 api无法显示来自 youtubev3 api 的缩略图
【发布时间】：2023-01-19 20:21:06
【问题描述】：

我正在尝试使用 youtubev3 api 制作 youtube 克隆

import React from 'react'
import { Link } from 'react-router-dom';
import { Typography, Card, CardContent, CardMedia } from '@mui/material';
import{ CheckCircle } from '@mui/icons-material';
import { demoThumbnailUrl, demoVideoUrl, demoVideoTitle, demoChannelUrl, demoChannelTitle } from '../utils/constants';


const VideoCard = ({ video :{id: videoId }, snippet}) => {
  console.log(videoId, snippet);
  return (
    <Card>
      <Link to= {videoId ? `/video/${videoId}`: demoVideoUrl}>
        <CardMedia 
          image={snippet?.thumbnails?.high?.url}
          alt={snippet?.title}
          sx={{width:350, height: 200}}
        />
      </Link>
    </Card>
  )
}

export default VideoCard

我得到这样的东西控制台消息是：我希望缩略图出现在这里而不是白框。任何人都知道如何解决它？

控制台错误

【问题讨论】：

标签： javascript reactjs react-hooks react-router

【解决方案1】：

试试这个作为你的 <img> src ：

https://i.ytimg.com/vi_webp/<video_id>/sddefault.webp

这将以.webp 格式提供给您您也可以更改格式或图像大小

看看这个链接： https://gist.github.com/a1ip/be4514c1fd392a8c13b05e082c4da363

【讨论】：