ReactJS和公共文件夹中的图像

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

有什么想法吗?

EDIT

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

结构文件夹为:

我不使用webpack。我应该吗?

编辑2

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

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

谢谢

当前回答

你不需要任何webpack配置。

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

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

其他回答

简单地使用

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

React会自动指向公共目录

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

使用

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

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

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

你不需要任何webpack配置。

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

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

这里有三个简单的方法可以做到这一点。

你可以在目录中创建一个文件夹，然后像我们导入的方式一样访问它你可以在SRC中直接给出图像名称 <img src="image__name" alt="yourpic" />

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

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

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

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

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

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

推荐文章