Javascript React.js上img的正确路径

我对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

localhost/details/2
->工作
localhost/details/2/id
->不工作，不显示图像

---

怎么可能解决这个问题？我希望在react router处理的任何形式的路由中，所有图像都可以以相同的路径显示。

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

但当您部署到www.my-domain.bike或任何其他站点时，这并不是一件好事。最好使用相对于站点根目录的url

---

在

创建react应用程序中

图像的相对路径似乎不起作用。相反，您可以导入图像：

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

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

从“./logo.png”导入徽标//图像的相对路径
类Nav扩展组件{
render（）{
报税表（
)  
}
}

如果您使用create react应用程序创建项目，则可以访问您的公用文件夹。因此，您需要将

图像

文件夹添加到公用文件夹中

公众/图像/

---

一位朋友向我展示了如何做到这一点，如下所示：

---

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

使用

create react app

有public文件夹（使用index.html…）。 如果您将“myImage.png”放在那里，比如在img子文件夹下，那么您可以通过以下方式访问它们：

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

根据官方使用说明添加到webpack.config.js，如下所示：

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

---

为我工作。

如果图像放在“src”文件夹中，请使用以下命令：

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

在src（/src/images）中创建一个图像文件夹，并将图像保存在其中。然后在组件中导入此图像（使用相对路径）。如下-

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

然后在您的组件中

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

这两种方法都有效，但推荐使用第一种方法，因为在构建期间，webpack会处理更干净的方式和图像

---

一些旧的答案不起作用，另一些是好的，但不能解释主题，总之：

如果图像位于“public”目录中 示例：

\public\charts\a.png

在html中：

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

将图像设置为id为“img1”的现有img，动态：

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

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

如果映像位于“src”目录中： 示例：

\src\logo.svg

在JavaScript中：

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

在jsx中：

<img src={logo} /> 

---

将徽标放在公用文件夹下，例如public/img/logo.png，然后将公用文件夹称为%public\u URL%：

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

在生成过程中，上面使用的%PUBLIC_URL%将替换为

PUBLIC

文件夹的URL。只能从HTML中引用

public

文件夹中的文件

---

与“/img/logo.png”或“logo.png”不同，“%PUBLIC\u URL%/img/logo.png”将在客户端路由和非根公共URL中正常工作。了解如何通过运行组件中的导入图像来配置非根公共URL

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

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

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

---

如果页面url包含多个url，则在

src

中返回

/

计数减去1次

---

例如，页面url

http://localhost:3000/play/game/

然后

src

url必须是

。/您的图像文件夹/图像名称

。您的

图像文件夹

必须位于

公用文件夹中。
只需直接指向图像，不要使用../code>需要使用的任何内容。请阅读本文以了解更多信息。希望这个答案能帮助您。谢谢，我要强调的是
/
细节之前的
/
（vs
/details
，等等，对于其他可能将两者混为一谈的人来说）。即使对我来说，它也不起作用。我将
reactjs
与
cordova
一起使用，并将
ES5
用作eslint虽然这和claireablani的解决方案都有效，但claireablani是create react app docs推荐的。他们列出了将资源公开的好处@user1322092是正确的。记住它是
/images/popcorn.png
，而不是
/images/popcorn.png
。为我处理了所有路由和内容。/将遵循组件url，不工作动态图像如何，例如，在create react app中的json文件中引用？@zok我想您应该从json文件导出变量，将变量导入组件。然后你可以像往常一样参考它。e、 g.在这里导出const my_src=variable_，从my_文件导入{my_src}，src={my_src}.
import./styles/style.less'**从“./styles/images/daildate.png”导入徽标**当图像存在且路径正确时，在第二行模块上找不到错误。如果您想查看核心网页作者的方法之一，也可以通过确认此方法。他还提到，每次引用图像时，您都可以使用导入图像。但不是这样，它只解决了图像问题，而没有解决路径问题。。Dima Gershman的答案是任何文件img或ELSETH路径的实际react解决方案。应将其标记为正确答案，因为它实际上是r