React中的图像URL

Question

我为我的应用程序中的每个组件使用相同的图像URL结构，但是其中之一显示我的图像URL错误。基本上，它会在图片网址的前面添加“菜单”。

正确的网址：/images/pizza.png

渲染的URL：/menu/images/pizza.png

我有一个菜单和详细信息组件。当我单击菜单上的盘子时，将显示与该盘子相关的详细信息组件。

在渲染图像之前，我打印出图像的URL，它显示了正确的URL（没有'menu'字符串），但是，在渲染之后，在图像URL和图像的前面添加了'menu'没有显示。

菜单组件：（它正确显示图像URL）

function RenderMenuItem({ dish }) {
return(
    <Card>
        <Link to={`/restaurant/menu/${dish.id}`}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
                <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
        </Link>
    </Card>

);
}

详细信息组件：（显示的图片网址错误）

function RenderDish({ dish }) {
if (dish) {
    return (
        <FadeTransform in
        transformProps={{
            exitTransform: 'scale(0.5) translateY(-50%)'
        }}>
        <Card>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardBody>
                <CardTitle>{dish.name}</CardTitle>
                <CardText>{dish.description}</CardText>
            </CardBody>
        </Card>
        </FadeTransform>
    )
} else {
    return (
        <div></div>
    )
}
}

相关路线：

 <Route exact path="/restaurant/menu" component={() => <Menu dishes= 
 {this.props.dishes} /> } />

 <Route path="/restaurant/menu/:dishId" component={DishWithId} />