ReactJS和公共文件夹中的图像

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

有什么想法吗?

编辑

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

结构文件夹为:

enter image description here

我不使用webpack。我应该吗?

编辑2

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

enter image description here

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

谢谢

395022 次浏览
小开

你应该在这里使用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是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML 所以你想在哪里使用这些图像并不重要。最佳实践是使用绝对路径(参考public)。不担心相对吗 路径。< / p >

在你的例子中，这应该在任何地方都适用:

"./images/logofooter.png"

小开

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}/>
小开

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

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
小开
最佳答案
要在公共场合引用图像，我知道有两种直接的方法。 一个像上面来自Homam Bahrani。

使用

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

既然这个方法有效，你真的不需要其他任何东西，但是，这个方法也有效。

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

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

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

试试这个简单易行的方法

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

NPM安装反应引导

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 />
</>
)
}

希望它已经完成了

小开

这里有一个确定的三个简单的方法来做到这一点…

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

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

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

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

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

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

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

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

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

小开

在public ex.Assets中创建一个文件夹，把你的图像放在这个文件夹中，并在src中指定folder_name / image_name

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

简单地使用

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

React会自动指向公共目录

小开

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


提交答案