我正在尝试使用带有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)
这是文件夹的结构:
首先导入图像
import FunctionalImage from '../resources/functional.png';
然后像这样传递:
<CardMedia image={FunctionalImage} />