Изображение на материале пользовательского интерфейса CardMedia - PullRequest
Новая
       10

Изображение на материале пользовательского интерфейса CardMedia

0 голосов
/ 10 мая 2018

У меня проблемы с получением изображения из реквизита на изображении CardMedia: 

<Card className={classes.card}>
    <CardMedia 
        className={classes.img}
        image={this.props.recipe.thumbnail}
    />
    <CardContent className={classes.content}>
        <Typography gutterBottom variant="headline" component="h2">
            {this.props.recipe.title}
        </Typography>
        <Typography component="p">
            {this.props.recipe.ingredients}
        </Typography>
    </CardContent>
    <CardActions>
        <Button 
            href={this.props.recipe.href}
            Recipe
        </Button> 
    </CardActions>
</Card>

Он просто не рендерится на всех изображениях;все остальные значения реквизита отображаются так, как они должны.Также в качестве пользовательского интерфейса материала я указал высоту CardMedia на JS CSS.

Кто-нибудь знает, почему это происходит?

Ответы [ 3 ]

0 голосов
/ 13 августа 2018

Я прочитал документы, а также заметил, что вы должны указать высоту для отображения изображений. В то время как они говорят, что вы должны создать компонент со стилем, я чувствую, что более простой способ сделать это - напрямую использовать опору стиля: 

<CardMedia
  style={{height: 0, paddingTop: '56.25%'}}
  image={project.image}
  title="lorem ipsum"
/>

Другие варианты: сначала создать объект стиля, а затем визуализировать компонент с помощью Style, как сказано в документации: 

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"
        />
      </Card>
    </div>
  );
}

export default withStyles(styles)(SimpleMediaCard);
0 голосов
/ 17 июня 2019

Я столкнулся с той же проблемой. Хорошим решением будет использовать элемент «img» вместе с атрибутом «src» внутри тела CardMedia вместо передачи его в качестве атрибута в CardMedia. 

<CardMedia>
 <img src={this.props.recipe.thumbnail} alt="recipe thumbnail"/>
</CardMedia>

И, передавая реквизит классу, я отправил путь изображения как объект. В вашем случае предположим, что рецепт - это объект с миниатюрой в качестве одного из атрибутов. Тогда в родительском классе я бы написал реквизит как: 

...
recipe = {
  .
  .
  thumbnail: require('assets/images/img1.jpg'),
  //make sure the path of the image is relative to parent class where you are defining the prop 
  .
  .
}
...

Здесь я отправляю путь к изображению как объект. Это сработало для меня.

0 голосов
/ 26 мая 2018

Хорошо, была такая же проблема.Наконец-то все заработало. 

const styles = 
{

media: {
  height: 0,
  paddingTop: '56.25%', // 16:9,
  marginTop:'30'
}
  };


 <CardMedia
      className={classes.media}
      ***image={require('assets/img/bg2.jpg')}***
      title="Contemplative Reptile"
      **style={styles.media}**
    />

Вы также можете проверить: https://codesandbox.io/s/9zqr09zqjo - Нет возможности загружать изображения.Местоположение изображения - мой местный

enter image description here

...