在 next.js 项目中的 Material UI cardMedia 中加载 Static 图像路径

Question

i'm trying to load a static image into Material UI CardMedia

const useStyles = makeStyles((theme) => ({
   media: {
     height: 0,
     paddingTop: "56.25%", // 16:9
    },
 }));

<CardMedia
 className={css.media}
 image="https://i.ibb.co/VvD4prS/Rectangle-185.png" 
 title="Paella dish"
 component="img"
 />              

I can't see my image

how can I use images inside Material UI cardMedia in a next.js project

codeSandBox https://codesandbox.io/s/angry-chihiro-wfjnz?file=/pages/index.js

Thanks in Advance

Answer 1

i Fixed the issue the media Height needed to be set to 100%

const useStyles = makeStyles((theme) => ({
   media: {
     height: "100%",
     paddingTop: "56.25%", // 16:9
    },
 }));