ReactJS 和公共文件夹中的图像

Question

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

有任何想法吗？

编辑

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

结构文件夹为：

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

编辑 2

我想使用 webpack 来加载图像和资产的 rest。 所以在我的配置文件夹中，我有下一个文件：

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

谢谢

Answer 1

你不需要任何 webpack 配置。

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

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

Answer 2

要在公共场合引用图像，我知道有两种方法可以直接进行。 一个就像上面来自 Homam Bahrani 的一样。

使用

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

而且由于这有效，您真的不需要任何其他东西，但是，这也有效......

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

Answer 3

反应文档在文档中很好地解释了这一点，您必须使用process.env.PUBLIC_URL并将图像放置在公共文件夹中。 请参阅此处了解更多信息

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

Answer 4

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
          }
        }
      ]
    }
  ],
},

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

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

<img src={image}/>

Answer 5

在公共 ex.Assets 中创建一个文件夹并将您的图像放在该文件夹中并在 src 中分配 folder_name / image_name

<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />

Answer 6

components文件夹中的react组件没有公共目录的概念。 结果像'./images...'这样的东西不起作用。 而在你的按钮组件中有这样的导入：

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

这是将静态资源导入反应组件的首选方法。 你可以像这样使用这个导入：

<Button srcAsProp={myImage}/>

或者干脆：

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

Answer 7

我们知道 React 是 SPA。 通过从 JSX 扩展为适当的 HTML，所有内容都从根组件呈现。

因此，您想在哪里使用图像并不重要。 最佳做法是使用绝对路径（参考公共）。 不要担心相对路径。

在您的情况下，这应该适用于任何地方：

"./images/logofooter.png"

Answer 8

只需使用

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

React 会自动指向公共目录

Answer 9

你应该在这里使用 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]'
        }
      }

在此之后，您可以简单地将图像导入到您的反应组件中：

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

使用 myImage 如下：

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

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

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

Answer 10

这是肯定的和三种简单的方法来做到这一点......

1. 您可以在目录中创建一个文件夹并像我们导入方式一样访问它或

2. 您可以在src中直接给出图像名称

   <img src="image__name" alt="yourpic" />

//默认情况下react look in public folder可以在img标签中渲染图片

3. const image = window.location.origin + "/image.png";

// 如果您的图像在文件夹 imagecollection 内的公共目录中，那么您可以通过这种方式导入它

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

Answer 11

试试这个简单易行

1. 不要在 src 中创建 Image 文件夹。
2. 公开制作一个图像文件夹。
3. 你在 react-bootstrap install 中工作

npm install react-bootstrap

 import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Image } from 'react-bootstrap'; export default function Main() { return ( <> <Image src="/img/image.jpg/100px250" alt="bg image" fluid /> </> ) }

希望它完成了

Answer 12

一个简单的解决方案是使用这样的路径/images/logoFooter.png 。 如果文件直接位于public下，请执行/someImage.png 。 您可以更深入地/x/y/z/image.png 。 将图像的定位部分视为该图像的absolute位置。

有关更多信息，请查看https://create-react-app.dev/docs/using-the-public-folder/ 。

Answer 13

如果您想从公用文件夹添加您的 javascript 文件以做出反应，请将特定文件放入公用文件夹中的 index.html 文件。 你的问题将得到解决。

Answer 14

你也可以使用这个..假设'yourimage.jpg'在你的公共文件夹中。

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