在React.js上更正img的路径

Question

我的反应项目中的图像存在问题。事实上，我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构：

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

但是我意识到路径是建立在网址上的。在我的一个组件中（例如到file1.jsx）我有这个：

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

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't works, 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

您正在使用相对网址，该网址相对于当前网址，而不是文件系统。您可以使用绝对网址

解决此问题

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

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

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

Answer 3

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

  

公共/图像/

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

Answer 4

create-react-app有公开文件夹（ index.html ...）。 如果您将“myImage.png”放在那里，请在 img 子文件夹下，然后您可以通过以下方式访问它们：

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

Answer 5

在我的情况下，代码也适用。

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

Answer 6

我建议使用传统的相对路径。您可以在下面的图片中像这样使用。我们可以将任何内容放在此public文件夹中，并且可以将该文件夹定位为访问images，videos等等，以此类推。 为此，请将图像保存在公用文件夹中。像这样...

而不是在jsx中。

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

Answer 7

总而言之，有些较旧的答案行不通，其他的虽然不错，但无法解释主题，

如果图片位于“公开”目录中

示例：\public\charts\a.png

在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 8

按照官方使用说明将file-loader npm添加到webpack.config.js中，如下所示：

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

为我工作。

Answer 9

将图像导入组件

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

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

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

Answer 10

一位朋友告诉我如何做到如下：

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

Answer 11

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

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

在构建过程中，以上对％PUBLIC_URL％的使用将替换为public文件夹的URL。 HTML只能引用public文件夹中的文件。

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

Answer 12

如果您的网页网址包含多个 / 则在 src 中返回 / 计数减 1 次。

例如页面 url http://localhost:3000/play/game/ 那么 src url 必须是 ../your-image-folder/image-name。您的 your-image-folder 必须位于 public 文件夹中。