我的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处理的任何形式的路由中，所有图像都可以使用相同的路径显示。

您使用的是相对网址，相对于当前网址，而不是文件系统。您可以使用绝对网址来解决此问题

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

但这不适用于您部署到www.my-domain.bike或任何其他站点的情况。最好使用相对于网站根目录的网址

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

在create-react-app图像的相对路径中似乎不起作用。相反，您可以导入图像：

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

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

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

公众/图片/

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

随着create-react-app有公共文件夹（与index.html的 ...）。如果将“ myImage.png”放在此处，在img子文件夹下说，则可以通过以下方式访问它们：

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

1. 在src（/ src / images）内创建一个图像文件夹，并将图像保留在其中。然后将此图像导入组件中（使用相对路径）。像下面一样

   import imageSrc from './images/image-name.jpg';

   然后在您的组件中。

   <img title="my-img" src={imageSrc} alt="my-img" />

2. 另一种方法是将图像保留在公用文件夹中，并使用相对路径导入它们。为此，在公用文件夹中创建一个图像文件夹，并将图像保留在其中。然后在您的组件中使用它，如下所示。

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   两种方法都可以使用，但推荐第一种方法，因为它的更简洁的方式和图像在构建期间由webpack处理。

就我而言，以下代码也可以工作。

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

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

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

例： \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} /> 

按照官方用法说明将文件加载器npm添加到webpack.config.js中，如下所示：

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

为我工作。

将图像导入组件中

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

并将图像名称src = {RecentProjectImage_3}上的图像名称作为对象

 <Img src={RecentProjectImage_3} alt="" />

一位朋友向我展示了如何执行以下操作：

当请求图像的文件（例如“ example.js”）在文件夹树结构中与文件夹“ images”处于同一级别时，“ ./”起作用。

将徽标放在您的公用文件夹下，例如public / img / logo.png下，然后将公用文件夹称为％PUBLIC_URL％：

<img src="%PUBLIC_URL%/img/logo.png"/>

上面的％PUBLIC_URL％的使用将public在构建期间替换为文件夹的URL 。publicHTML只能引用文件夹中的文件。

与“ /img/logo.png”或“ logo.png”不同，“％PUBLIC_URL％/ img / logo.png”可以在客户端路由和非根公共URL上正常使用。了解如何通过运行来配置非根公共URL npm run build。