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

Question

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

我有一个卡片组件（在这里用MyCardComponent表示），我想将字符串prop传递到图像文件的位置，并将其呈现在材质上的CardMedia元素中， ui 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'/>

Answer 1

我发现了两个问题：

1. 图像路径问题。
2. 您忘记使用paddingTop。阅读the docs。

Here an example。

Answer 2

首先尝试使用导入图像

import cocacola from 'whereveryourimageis/cocacola.png'

然后像这样使用它

imagePath={cocacola}

现在就在那里！

但是不会出现，因为您的.MuiCardMedia-root显然具有height = 0，因此您也应该处理该问题