公共文件夹中的ReactJS和图像

103

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

有任何想法吗？

编辑

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

结构文件夹为：

我不使用webpack。我是不是该？

编辑2

我想使用webpack加载图像和其余资产。因此，在我的配置文件夹中，我有以下文件：

我需要在哪里添加图像的路径以及如何添加？

谢谢

javascript reactjs

— Aceconhielo
source

1

此文件夹对什么公用？您的项目结构是什么？您是否也将图像与webpack捆绑在一起或被排除在外？等等等等等等上下文上下文

— Joel Harkes's

@JoelHarkes已编辑。

— Aceconhielo '17

好像没有打包。你尝试过：src="/images/logofooter.png"？

— 乔尔·哈克斯

抱歉，这与问题无关，但是您使用什么图标主题？

— Nermin

尝试在src中创建一个文件夹，将其存储在其中，然后使用相对路径导入它。出于多种原因，这会更好。只是一个建议！

— Aditya Patnaik

86

要公开引用图像，我知道有两种方法可以直接使用。就像上面的Homam Bahrani所说的那样。

使用

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

既然这有效，那么您实际上不需要任何其他东西，这也可以工作...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

— 杰拉德
source

1

它在控制台中未显示任何错误，但是图像显示为默认图像图标，而不是我导入的图像。我已经尝试过您提到的两种情况。请帮帮我。谢谢！

— Prakhar Mittal，

160

您不需要任何webpack配置。

在您的组件中给出图像路径。默认情况下，react会在公共目录中知道它。

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

— 野兽
source

2

这对我有用。只有我将图像复制到公共目录。React自动解析路径。

— Vineeth Bhaskaran，

2

并且，如果图像位于公用文件夹内的某个文件夹中，会知道知道如何反应吗？

— Yuval Levy，

2

是的@YuvalLevy。

— 奥利弗·沃特

这是最好的方法，因为process.env.PUBLIC_URL是相对路径，并且对于嵌套路径将工作错误。最好的方法是按照答案中指定的斜线开始使用绝对路线...

— Baraja Swargiary

12

react文档在文档中很好地解释了这一点，您必须使用process.env.PUBLIC_URL放置在公用文件夹中的图像。见这里获取更多信息

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

— 霍姆·巴赫拉尼
source

是的，对于src dir层次结构之外的动态图像。静态徽标（例如徽标或背景）可以通过导入方法实现。

— 胡安·拉努斯

1

同样，这是针对使用create react应用构建的应用

— eballeste

1

它在控制台中未显示任何错误，但是图像显示为默认图像图标，而不是我导入的图像。请帮帮我。

— Prakhar Mittal，

3

1-如果您使用webpack进行配置是很好的，但是您只需使用映像路径，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}/>

— 哈桑·阿贾兹（Hassan Ajaz）
source

2

您应该在此处使用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>

— 乌梅什
source

我怀疑您是否需要webpack才能导入资源。

— Siya

@fshock，我说过它将使完成任务变得更加容易。

— Umesh

@Umesh我更喜欢使用Webpack。所以您说我必须在配置中添加规则，但是哪个文件呢？我有path.js，polyfills.js，webpack.config.dev.js，webpack.config.prod.js和webpackDevServer.config.js。我将编辑问题，以便所有人都可以看到结构。谢谢

— Aceconhielo '17

@Aceconhielo，您应该将其包含在webpack.config.dev.js和webpack.config.prod.js中

— Umesh

2

我们知道React是SPA。通过从JSX扩展到适当的HTML，一切都从根组件呈现。

因此，在哪里使用图像都没有关系。最佳实践是使用绝对路径（参考public）。不用担心相对路径。

就您而言，这应该在任何地方都有效：

"./images/logofooter.png"

— 卡尔提克·萨加尔（Karthik Sagar）
source

-1

您也可以使用此方法..它可以在您的公用文件夹中假设“ yourimage.jpg”起作用。

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

— smoothVibes
source