Почему я не вижу изображения на примере материала -ui-next "Карты"? - PullRequest
0 голосов
/ 18 мая 2018

Этот пример взят с веб-сайта material-ui-next, но почему-то я не вижу изображение, которое является «изображением ящерицы», когда я пытаюсь запустить его на своем компьютере.

Почему можно увидеть изображение?Я не получил ошибку в своей консоли, и пример "простой карты" на веб-сайте работает для меня, но не тот с изображением, как "Ящерица".(Я думаю, что моя ошибка в пути изображения или источника изображения)

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);

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Если вы используете URL для изображения, вам, вероятно, придется использовать компонент img и указать его путь в src.

                <CardMedia
                  component="img"
                  src={url}
                />
0 голосов
/ 18 мая 2018

Теперь я знаю, я изменил путь к изображению на

  import logo from './lizard.jpg';
         <CardMedia
              className={classes.media}
              image={logo}
              title="Contemplative Reptile"
            />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...