在 next.js 项目中加载 Material UI cardMedia 内的静态图像路径答案

【问题标题】：loading Static image path inside Material UI cardMedia in next.js project在 next.js 项目中加载 Material UI cardMedia 内的静态图像路径
【发布时间】：2022-01-26 10:24:01
【问题描述】：

我正在尝试将静态图像加载到 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"
 />

我看不到我的图片

如何在 next.js 项目中使用 Material UI cardMedia 中的图像

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

提前致谢

【问题讨论】：

标签： javascript material-ui next.js

【解决方案1】：

我修复了这个问题媒体高度需要设置为 100%

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

【讨论】：