时间戳

首页 > 解决方案 > React 中的图片 URL

reactjs - React 中的图片 URL

问题描述

我为我的应用程序中的每个组件使用相同的图像 URL 结构，但是，其中一个显示我的图像 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>

);
}

详细组件：（它显示图像 URL 错误）

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} />

标签： reactjsurl

解决方案

推荐阅读