我在我的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,所有的图像可以显示相同的路径。


当前回答

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

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

为我工作。

其他回答

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

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

为我工作。

在create-react-app中,图像的相对路径似乎不起作用。相反,你可以导入一个图像:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

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

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

有些老答案行不通,有些答案不错,但不能解释主题,总结如下:

如果image在'public'目录中

例如:\ \ \ a.png图表

在html中:

<img id="imglogo" src="/charts/logo.svg" />

在JavaScript中:

动态地在新img中创建图像:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

动态设置image为现有的img, id为'img1':

document.getElementById('img1').src = 'charts/a.png';

如果image在'src'目录下:

例如:\ src \ logo.svg

在JavaScript中:

import logo from './logo.svg';  
img1.src = logo;  

在jsx:

<img src={logo} /> 

如果你使用create-react-app来创建项目,那么你的公共文件夹是可访问的。所以你需要在公共文件夹中添加你的图像文件夹。

公共/图像/

<img src=“/images/logo.png” />