求助：Material UI卡片组件中图片无法渲染问题排查

我在React项目中使用Material UI开发时，遇到卡片组件内图片无法渲染的问题。目前卡片及Gamestrip组件布局正常，但图片始终无法显示。我已尝试导入不同格式（SVG、PNG）、不同路径的图片，更换其他图片测试，均未成功。目标图片尺寸为22x25，期望显示在Typography文本的右侧。

组件代码（InviteCard.jsx） #

import { Card, CardMedia, CardContent, Typography, Grid } from '@mui/material';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  card: {
    display: 'flex',
    position: 'relative !important',
    borderRadius: '0 !important',
    background: 'linear-gradient(180deg, #FD5F6D 0%, #141C27 100%)',
    mixBlendMode: 'luminosity',
    opacity: '0.7',
    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
  },
  media: {
    width: '100%',
    height: '100%',
    top: "10%",
    objectFit: 'contain',
    position: 'relative !important',
  },
});

function InviteCard({ title, imageSRC, children }) {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <div style={{ borderLeft: '6px', padding: '20px' }}>
        <CardContent>
          <Typography sx={{
                position: 'absolute',
                width: '130px',
                height: '72px',
                left: '8%',
                top: '8%',
                fontFamily: 'Post No Bills Jaffna Light',
                fontStyle: 'normal',
                fontWeight: 300,
                fontSize: '48px',
                lineHeight: '72px',
                textAlign: 'center',
                color: '#FFFFFF',
            }}>
            {title}
          </Typography>
          <Grid container alignItems="center" spacing={2} style={{ marginTop: '20px' }}>
            <Grid item>
              <CardMedia className={classes.media} image={imageSRC} />
            </Grid>
            <Grid item xs>
              <CardContent>{children}</CardContent>
            </Grid>
          </Grid>
        </CardContent>
      </div>
    </Card>
  );
};

export default InviteCard;

页面调用代码（Home.jsx） #

import Gamestrip from '../components/Gamestrip.jsx'
import { Box, Grid } from '@mui/material'
import InviteCard from '../components/InviteCard.jsx'
import MainButton from '../components/MainButton.jsx'
import individual1 from '../assets/images/individual.svg';
import individual2 from '../assets/images/individual.png';
import individual3 from './individual.png'

function Home(){return(
    <>
        <Gamestrip top_var='44%' 
        strip_color='linear-gradient(270deg, rgba(255, 163, 0, 0) 0%, rgba(253, 95, 109, 1) 50.28%, rgba(255, 163, 1, 0) 100%)' 
        text='Placeholder'/>
        <Box sx={{
            marginTop: '24%',
        }}>
            <Grid container spacing={2} sx={{height: '190px',}}>
                <Grid item xs={4} >
                    <InviteCard title='Placeholder' imageSRC={individual1}>
                        
                    </InviteCard>
                </Grid>
                <Grid item xs={4}>
                    <InviteCard title='Placeholder' imageSRC={individual2}>
                        
                    </InviteCard>
                </Grid>
                <Grid item xs={4}>
                    <InviteCard title='Placeholder' imageSRC={individual3}>
                        
                    </InviteCard>
                </Grid>
            </Grid>
        </Box>
        <Gamestrip top_var='71.4%' 
        strip_color='linear-gradient(270deg, rgba(255, 95, 106, 0) 0%, rgba(255, 163, 1, 0.8) 50.28%, rgba(254, 93, 108, 0) 100%)' 
        text='Placeholder'/>        
    </>
    )}

export default Home;

内容的提问来源于stack exchange，提问作者atilappl