Reactjs 对材料和媒体问题作出反应

我使用CardMedia显示图像，当我转到主页时，它不显示图像，并且有一些错误。当我点击一些链接并使用浏览器中的“返回”按钮时，图像会返回

我使用

getInitialProps（）

获取主组件中的图像url，并将其作为属性传递给子（目录）组件

我认为图像url将在主组件中接收，然后CardMedia将从主组件接收的图像作为道具呈现。 有什么想法吗

export default function Home({ categories }) {
 
    return (
        <div>
            <Header categories={ categories}/>
            <Carousel />
       
            <Catalog categories={ categories}/>
            <Footer/>
        </div>
    )
}

Home.getInitialProps = async () => {
    const response = await fetch('http://localhost:1337/categories/')
    const categories = await response.json();
    return {
      categories:categories
    }
  }

导出默认函数Home（{categories}）{
返回(
)
}
Home.getInitialProps=async（）=>{
const response=等待获取（'http://localhost:1337/categories/')
const categories=wait response.json（）；
返回{
类别：类别
}
}

导出默认功能目录（道具）{
const classes=useStyles（）；
常量卡=道具类别
常数服务器http://localhost:1337'
控制台日志（卡片）
返回(
{/*英雄单位*/}
相册布局
在其内容、创作者等下面的一些简短和引导性的东西。
让它短而甜，但不要太短，这样人们就不会简单地跳过它
完全
{/*结束英雄单元*/}
{cards.map（（card）=>(
{card.category}
产品说明。
))}
{/*页脚*/}
{/*结束页脚*/}
);
}

事实证明，在Next.js中，CSS呈现有点不同。

---

请参阅此文档。

Hi@hei o我认为您缺少src组件以及建议从CardMedia使用的高度。@VitDev Hi，Home组件是src组件。一旦使用“返回”按钮，图像就在那里，不知道为什么它在初始阶段不渲染

export default function Catalog(props) {
  const classes = useStyles();
  const cards = props.categories
  const server = 'http://localhost:1337'
  console.log(cards)
  return (
    <React.Fragment>
      <CssBaseline />

      <main>
        {/* Hero unit */}
        <div className={classes.heroContent}>
          <Container maxWidth="sm">
            <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
              Album layout
            </Typography>
            <Typography variant="h5" align="center" color="textSecondary" paragraph>
              Something short and leading about the collection below—its contents, the creator, etc.
              Make it short and sweet, but not too short so folks don&apos;t simply skip over it
              entirely.
            </Typography>
          </Container>
        </div>
        <Container className={classes.cardGrid} maxWidth="md">
          {/* End hero unit */}
          <Grid container spacing={4}>
            {cards.map((card) => (
              <Link as={`/products/${card.category}`} href='/products/[bathroom]' key={card.id}>
                <Grid item key={card.category} xs={12} sm={6} md={4} >
                  <Card className={classes.card}>
                    <CardMedia
                      className={classes.cardMedia}
                      image={server+ card.img.url}
                      category={card.category}

                    />
                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {card.category}
                      </Typography>
                      <Typography>
                        Product description.
                    </Typography>
                    </CardContent>

                  </Card>
                </Grid>
              </Link>


            ))}
          </Grid>
        </Container>
      </main>
      {/* Footer */}

      {/* End footer */}
    </React.Fragment>
  );
}