在React.js上更正img的路径

Question

我的反应项目中的图像存在问题.事实上,我一直认为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处理的任何形式的路由中,所有图像都可以用相同的路径显示.

Answer 1

不试图回答这个问题 - 只是注意到在create-react-app中,图像的相对路径似乎不起作用.相反,您可以导入图像.

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

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

Answer 2

如果您使用create-react-app创建项目,则可以访问您的公用文件夹.因此,您需要在image公用文件夹中添加文件夹.

公共/图片/

<img src="/images/logo.png" />

Answer 3

您正在使用相对网址,该网址相对于当前网址,而不是文件系统.您可以使用绝对网址解决此问题

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

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

<img src="/details/img/myImage.png" />

Answer 4

随着create-react-app有公共文件夹(与index.html的 ...).如果你把"myImage.png"放在那里,比如在img子文件夹下,那么你可以通过以下方式访问它们:

<img src={window.location.origin + '/img/myImage.png'} />

Answer 5

我建议使用传统的相对路径.您可以在图像中使用如下所示.我们可以在此public文件夹中放置任何内容,并可以将此文件夹作为目标文件进行访问images,videos依此类推......此设置是通过自身反应来完成 为此,请将图像保存在公共文件夹中.像这样......

而且比你的jsx.

<img src="images/pitbull-mark.png" />

Answer 6

在我的情况下,以下代码也适用.

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

Answer 7

我已经用过这种方式并且效果很好

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

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

Answer 8

总结一下，一些较旧的答案行不通，另一些则不错，但不会解释主题。

如果图片在“公共”目录中

例： \public\charts\a.png

在html中：

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

在JavaScript中：

动态创建图像到新的img：

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

将图片动态设置为ID为'img1'的现有img：

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

如果图像在“ src”目录中：

例： \src\logo.svg

在JavaScript中：

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

在jsx中：

<img src={logo} /> 

Answer 9

根据官方使用说明将文件加载器 npm添加到 webpack.config.js，如下所示：

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

为我工作。