javascript - 图像未显示在 material-ui CardMedia 元素中

Question

我创建了我在应用程序中遇到的问题的简化版本。

MyCardComponent我有一个卡片CardMedia组件 （此处由Card

但是图像没有出现，我如何让它渲染？. 查看 CodeSandbox 中重新创建的问题

MyCardComponent.js

import React from "react";
import PropTypes from "prop-types";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import { Card, CardMedia, CardContent } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  cardRootStyle: {
    minHeight: 300,
    maxHeight: 300
  },
  cardMediaStyle: {
    minHeight: 100,
    maxHeight: 100
  }
}));
export default function MyCardComponent(props) {
  const styles = useStyles();
  return (
    <>
      <Card
        classes={{
          root: styles.cardRootStyle
        }}
      >
        <CardContent>
          <CardMedia image={props.imagePath} />
        </CardContent>
      </Card>
    </>
  );
}

MyCardComponent.propTypes = {
  imagePath: PropTypes.string
};

我MyCardComponent这样打电话

<MyCardComponent imagePath='/static/sampleimages/cocacola.png'/>

标签： javascriptcssreactjsmaterial-ui

Answer 1

我发现了两个问题：

1. 图片路径有问题。
2. 你忘记使用了paddingTop。阅读文档。

这里举个例子。