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

有什么想法吗?

EDIT

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

结构文件夹为:

我不使用webpack。我应该吗?

编辑2

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

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

谢谢


当前回答

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

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

其他回答

我们知道React是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML。

所以你想在哪里使用这些图像并不重要。最佳实践是使用绝对路径(参考public)。不担心相对吗 路径。

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

”。/图片/ logofooter.png”

你不需要任何webpack配置。

在你的组件中,只需要给出图像路径。React会知道它在公共目录中。

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

要在公共场合引用图片,我知道有两种直接的方法。 一个像上面的Homam Bahrani。

使用

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

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

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

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

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

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