映射Material-UI卡时未加载图像

Question

我有点不适应，这是第一次尝试从API调用中获取信息，通过它进行映射，并为每个响应制作一个Material-UI卡。当我制作一张卡时，它就很好了。当我映射响应时，将为每个响应制作卡片，并将文本正确输入到字段中，但不会加载图像。即使使用未从响应加载的静态图像，该图像也不会显示。这是我正在查看的内容：

//调用API，映射结果并构建卡

import React, {Component} from 'react'


import Request from 'superagent'
import Grid from '@material-ui/core/Grid'
import Cards from './cards'


const url = "http://localhost:4000/products"
const get = Request.get(url)

class ProductList extends Component {
    state = {
        products: []

    }

    constructor() {
        super()
        this.getProducts()
    }

    getProducts = () =>

    Request.get(url)
    .then((response) => {
        const prods = (response.body.products)
        console.log(prods)
        this.setState({products: prods})
    })

render() {
    return (
    <div>
        {this.state.products ? (

            <Grid container spacing={24} style = {{padding: 24}}>
            { this.state.products.map(prods => (
                <Grid item xs={8} sm={4} lg={4} xl={3}>
                 <Cards id={prods.id} name = {prods.name} quantity = {prods.quantity} price = {prods.price} image = {prods.iamge} />
                </Grid>

                ))}
            </Grid>
            ) : "No products found" }
    </div>
        )   
}

}


export default ProductList;

//构建卡

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';
import Request from 'superagent';


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

const Cards = (props) => {
    return(

        <div>
      <Card>
        <CardMedia
          image= {require ("./images/matcha.jpg")}
          title="{props.name}"
        />
        <CardContent>
          <Typography gutterBottom variant="headline" component="h2">
            {props.name}
          </Typography>
          <Typography component="p">
           {props.price}
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small" color="primary">
            Share
          </Button>
          <Button size="small" color="primary">
            Learn More
          </Button>
        </CardActions>
      </Card>
    </div>
  );


Cards.propTypes = {
  classes: PropTypes.object.isRequired,
}


}

export default Cards

//建立一张个人卡

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';
import Request from 'superagent';

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

function SimpleMediaCard(props) {
  const url = "http://localhost:4000/products";
  const { classes } = props;
  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          className={classes.media}
          image= {require ("./images/matcha.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);

//渲染页面

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'
import MenuBar from '../menubar'
import SimpleMediaCard from '../card'
import ProductList from '../productList'




function Products (props) {
    return (
        <div>
        <MenuBar />
        <SimpleMediaCard />
        <ProductList />
        </div>

        )
}

export default Products

在呈现的页面上有四张卡片。第一个是应该包含的图片和文字。接下来的三张卡片（数据库中有三项）显示文本，但没有图像。我以为起初我在使用webpack时遇到问题，需要“ require”，但是即使使用静态图像链接，仍然没有图像。有任何想法吗？

Answer 1

经过一天半的搜索，初始修复非常简单。CardMedia需要height属性才能渲染图像。新增中

    <CardMedia style = {{ height: 0, paddingTop: '56%'}}
     image= {require ("./images/matcha.jpg")

至少渲染了静态图像。希望这对某人有帮助！

Answer 2

Since CardMedia is a generic component for rendering different types of media, providing the source src alone isn't enough. The component prop should be used to tell CardMedia what to render

import image from '../path/to/images/imageName.jpg'
...
...
<CardMedia component="img" src={image}

Answer 3

这对我有用

import img from "./img/placeholder2.jpg";


 <CardMedia
          className={classes.media}
          image= {img}
          title="plcae holder"
        />