Question

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

有什么想法吗？

修改

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

结构文件夹是：

我不使用webpack。我应该吗？

修改2

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

我需要添加图片的路径以及如何添加？

由于

Answer 1

你不需要任何webpack配置..

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

<img src="/image.jpg">

Answer 2

要公开引用图像，我知道有两种方法可以直接使用。例如上图的霍玛·巴赫拉尼（Homam Bahrani）。

使用

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

由于这可以工作，您真的不需要其他任何东西，但是，这也可以工作...

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

Answer 3

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

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

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

<Button srcAsProp={myImage}/>

或简单地说：

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

Answer 4

react文档在文档中很好地解释了这一点，您必须对放在公共文件夹中的图像使用process.env.PUBLIC_URL。有关更多信息，请参见here

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

Answer 5

1-如果您使用webpack进行配置，这很好，但您可以简单地使用图像路径并做出反应，发现它位于公共目录中。

<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 6

在 public ex.Assets 中创建一个文件夹并将您的图像放在该文件夹中并在 src 中指定 folder_name / image_name

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

Answer 7

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

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

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

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

"./images/logofooter.png"

Answer 9

试试这个简单又简单

不要在 src 中创建 Image 文件夹。
公开创建一个图像文件夹。
你在 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 10

您也可以使用它。.假设您的公用文件夹中有“ yourimage.jpg”，它就可以使用。

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

Answer 11

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

您可以在目录中创建一个文件夹并按照我们的导入方式访问它或

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

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

//默认在public文件夹中react look可以在img标签中渲染图片

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

//如果你的图片在文件夹imagecollection内的public目录中，你可以通过这种方式导入它

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

Answer 12

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

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

ReactJS和公共文件夹中的图像

12 个答案: