为什么这个CardMedia不会在资源文件夹上显示图像？

Question

我正在尝试使用带有CardMedia标签的照片的卡组件，但我无法显示图像。图像文件放在创建的“资源”文件夹中。

我正在使用codesandbox.io平台进行编码。谢谢你们！

这是grid.js文件中的Card实现代码：

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
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: 140
  }
}

function Grid(props) {
  const { classes } = props
  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="../resources/functional.png"
          title="Functional Programming"
        />
        <CardContent>
          <Typography gutterBottom variant="h4" component="h4">
            Functional Programming
          </Typography>
          <Typography component="p">
            Functional Programming is a paradigm—a style of building the
            structure and elements of computer programs—that treats computation
            as the{' '}
            <b>
              evaluation of mathematical functions and avoids changing-state and
              mutable data
            </b>
            .
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          SEE MORE
        </Button>
      </CardActions>
    </Card>
  )
}

Grid.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(Grid)

这是文件夹的结构：

Answer 1

首先导入图像

import FunctionalImage from '../resources/functional.png';

然后像这样传递：

<CardMedia image={FunctionalImage} />