Javascript 图像未显示在材质ui CardMedia元素中

我已经为我的应用程序中存在的问题创建了一个简化版本

我有一个卡片组件（这里用

MyCardComponent

表示），我想将一个字符串道具与图像文件的位置一起传递到该组件中，并将其呈现在材质ui

card

上的

CardMedia

元素中

但是图像没有显示，如何使其渲染。请参阅在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
};

---

首先尝试使用导入图像

import cocacola from 'whereveryourimageis/cocacola.png'

然后像这样使用它

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

imagePath={cocacola}

现在它就在那里

---

但是不会显示，因为显然你的.MuiCardMedia根的高度为0，所以你也应该处理这个问题

首先尝试用

import cocacola from 'whereveryourimageis/cocacola.png'

然后像这样使用它

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

imagePath={cocacola}

现在它就在那里

但是不会显示，因为显然你的.MuiCardMedia根的高度为0，所以你也应该处理这个问题

我发现了两个问题：

图像路径有问题

您忘了使用

paddingTop

。阅读

.

我发现了两个问题：

图像路径有问题

您忘了使用

paddingTop

。阅读

---

.

谢谢你的例子。我现在可以看到，我应该在我的应用程序的公共目录，而不是在自己的静态目录在该级别的图像。现在一切正常，谢谢你的例子。我现在可以看到，我应该在我的应用程序的公共目录，而不是在自己的静态目录在该级别的图像。现在都在工作