我在我的react项目上的图像有一些问题。事实上,我一直认为src属性的相对路径是建立在文件体系结构上的

下面是我的文件架构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

然而,我意识到路径是建立在url上的。在我的一个组件(例如file1.jsx)中,我有这个:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么解决这个问题呢?我想在任何形式的路由处理的react-router,所有的图像可以显示相同的路径。


当前回答

如果你的页面url包含多个/,那么在src中返回/ count - 1次。

例如页面url http://localhost:3000/play/game/,那么src url必须是../your-image-folder/image-name。你的your-image文件夹必须在公共文件夹中。

其他回答

我用过这种方法,效果很好

import Product from "../../images/product-icon.png";
import { Icon } from "@material-ui/core";

<Icon>
    <img src={Product} style={{ width: "21px", height: "24px" }} />
</Icon>

一位朋友向我展示了如何做到这一点:

".当请求图像的文件(例如,"example.js")在文件夹树结构中与文件夹"images"在同一层时,/"工作。

您使用的是相对url,相对于当前url,而不是文件系统。你可以通过使用绝对url来解决这个问题

<img src ="http://localhost:3000/details/img/myImage.png" />

但是当您部署到www.my-domain.bike或任何其他站点时,这不是很好。更好的方法是使用相对于站点根目录的url

<img src=“/细节/img/myImage.png”/>

如果图像放在src文件夹中,请使用以下方法:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

根据webpack.config.js的官方使用指令,添加文件加载器npm,如下所示:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

为我工作。