Question

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

为什么能看到图像？我的控制台没有错误，网站上的“简单卡片”示例对我有用，但不是像“Lizard”这样的图像。（我认为我的错误在图像路径或图像的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);

Answer 1

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

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

Answer 2

如果您要使用某些图像URL，则可能必须使用img组件，并在src中给出其路径。

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

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

2 个答案: