我是ReactJS的新手,我想在一个组件中导入图像。这些图像在公用文件夹内,我不知道如何从react组件访问文件夹。

有什么想法吗?

EDIT

我想在Bottom.js或Header.js中导入一个图像

结构文件夹为:

我不使用webpack。我应该吗?

编辑2

我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中,我有下面的文件:

我需要在哪里添加图像的路径,如何添加?

谢谢


当前回答

试试这个简单易行的方法

不要在src中创建Image文件夹。 在公共场所制作一个图像文件夹。 你工作在反应引导安装

NPM安装反应引导 import React from 导入“引导/ dist / css / bootstrap.min.css”; import {Image} from 'react-bootstrap'; 导出默认函数Main() { 回报( <> <Image src="/img/ Image .jpg/100px250" alt="bg Image " fluid /> . </> ) }

希望它已经完成了

其他回答

你也可以用这个…它的工作假设'yourimage.jpg'是在你的公共文件夹。

<img src={'./yourimage.jpg'}/>

你应该在这里使用webpack来使你的生活更简单。在配置中添加以下规则:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

在这之后,你可以简单地将图像导入你的react组件:

import myImage from 'publicfolder/images/Image1.png'

使用myImage如下所示:

<div><img src={myImage}/></div>

或者如果图像导入到组件的本地状态

<div><img src={this.state.myImage}/></div> 

你不需要任何webpack配置。

在你的组件中,只需要给出图像路径。React会知道它在公共目录中。

<img src="/image.jpg" alt="image" />

react文档很好地解释了这一点,你必须使用process.env。PUBLIC_URL,图像放在公共文件夹中。更多信息请看这里

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

简单地使用

<img src='/image.extension' />

React会自动指向公共目录