为什么我在材料 -ui-next “卡片”的示例中看不到图像？答案

【问题标题】：Why i cant see image in the example of material -ui-next "Cards"?为什么我在材料 -ui-next “卡片”的示例中看不到图像？
【发布时间】：2018-05-18 08:38:50
【问题描述】：

This example 来自 material-ui-next 网站，但是当我尝试在我的计算机上运行它时，不知何故我看不到“蜥蜴图像”。

为什么可以看到图片？我的控制台没有错误，网站中的“简单卡”示例对我有用，但不是像“蜥蜴”这样的图像。（我认为我的错误是在图像的路径或图像的 src 中）

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
};

function SimpleMediaCard(props) {
  const { classes } = props;
  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="headline" component="h2">
            Lizard
          </Typography>
          <Typography component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small" color="primary">
            Share
          </Button>
          <Button size="small" color="primary">
            Learn More
          </Button>
        </CardActions>
      </Card>
    </div>
  );
}

SimpleMediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleMediaCard);

【问题讨论】：

标签： html css reactjs material-ui

【解决方案1】：

现在我知道了，我将 Image 的路径更改为

  import logo from './lizard.jpg';
         <CardMedia
              className={classes.media}
              image={logo}
              title="Contemplative Reptile"
            />

【讨论】：

我们还有其他方法吗？像内联路径？

【解决方案2】：

如果你使用一些 url 来图像，你可能必须使用 img 组件并在 src 中给出它的路径。

                <CardMedia
                  component="img"
                  src={url}
                />

【讨论】：