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

有什么想法吗?

EDIT

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

结构文件夹为:

我不使用webpack。我应该吗?

编辑2

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

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

谢谢


当前回答

1-如果你使用webpack进行配置是很好的,但你可以简单地使用image path, react会发现它在公共目录中。

<img src="/image.jpg">

2-如果你想使用webpack,这是React的标准做法。 你可以在webpack.config.dev.js文件中使用这些规则。

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

然后你可以在react组件中导入图像文件并使用它。

import image from '../../public/images/logofooter.png'

<img src={image}/>

其他回答

这里有三个简单的方法可以做到这一点。

你可以在目录中创建一个文件夹,然后像我们导入的方式一样访问它 你可以在SRC中直接给出图像名称 <img src="image__name" alt="yourpic" />

//默认情况下,公共文件夹中的react look可以在img标签中渲染图像

Const image = window.location.origin + "/image.png";

//如果你的图片在公共目录的imagecollection文件夹里面,你可以用这种方式导入它

  const image = window.location.origin + "/imagecollection /image.png";
 <img src={image} alt="yourpic" />

1-如果你使用webpack进行配置是很好的,但你可以简单地使用image path, react会发现它在公共目录中。

<img src="/image.jpg">

2-如果你想使用webpack,这是React的标准做法。 你可以在webpack.config.dev.js文件中使用这些规则。

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

然后你可以在react组件中导入图像文件并使用它。

import image from '../../public/images/logofooter.png'

<img src={image}/>

如果你想把你的javascript文件从公共文件夹添加到react,把特定的文件放在公共文件夹的index.html文件中。你的问题会解决的。

一个简单的解决方案是使用这样的路径:/images/logoFooter.png。如果文件直接位于公用文件夹下,执行/someImage.png。你可以深入/x/y/z/image.png。将图像的定位部分视为该图像的绝对位置。

欲了解更多信息,请访问https://create-react-app.dev/docs/using-the-public-folder/。

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

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