Img всегда сломан независимо от того, "Src"?

Question

Я использую пример Google React "Сложная сетка" (найдено здесь ) для создания макета типа карты.

Код выглядит следующим образом:

return (
    <div className={classes.root}>
        <Paper
            className={classes.paper}
            onMouseOver={this.handleMouseOver}
            onMouseOut={this.handleMouseOut}
            onClick={this.handleClick}
        >
            <Grid container spacing={16}>
                <Grid item>
                    <ButtonBase className={classes.image}>
                        <img className={classes.img} alt={imgAlt} src={imgPath}/>
                    </ButtonBase>
                </Grid>
                <Grid item xs={12} sm container>
                    <Grid item xs container direction="column" spacing={16}>
                        <Grid item xs>
                            <Typography gutterBottom variant="subtitle1">
                                {cardHeader}
                            </Typography>
                            <Typography gutterBottom>{cardShortText}</Typography>
                            <Typography color="textSecondary">Platforms: {cardPlatforms}</Typography>
                        </Grid>
                        <Grid item>
                            <Typography variant="subtitle1">{cardDate}</Typography>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Paper>
    </div>
);

И в другом классе, который должен содержать сетку этих компонентов, я передаю кучу переменных в качестве реквизита, чтобы я мог повторно использовать компонент Complex Grid.Ниже мой тест этого:

<ComplexCard
    imgAlt="alt text"
    imgPath="../img/games/testimg.png"
    cardHeader="Header"
    cardShortText="Short Description"
    cardPlatforms={[<FontAwesomeIcon key={Math.random()} size="lg" icon={faMicrosoft} />]}
    cardDate="2018"
/>

Но независимо от того, что я назвал «imgPath», он выглядит так:

Как вы можетевидите, изображение сломано.Я проверил, что путь определенно правильный.Чего мне не хватает?

Answer 1

Чтобы получить полный путь к изображению, используйте require, то есть:

imgPath={require("../img/games/testimg.png")}