如何在ReactJS中设置图片网址

Question

我正在尝试在img的{​​{1}}标签内设置图像的路径，但未显示...

这就是我尝试过的...

ReactJS

这是我的文件夹结构

有人可以告诉我我哪里出了问题吗？

Answer 1

假设您正在使用webpack或类似的捆绑程序进行代码编译，则可以使用文件加载器来确保将映像复制到compile文件夹，并获得指向该映像的路径，如下所示：

import imagePath from '../images/sample.jpg'

...

<img src={imagePath} />

Answer 2

在您的项目结构中，看起来public文件夹是您应放置所有图像的位置。可以直接通过url访问的任何文件（如图像）都应位于此文件夹中。 src和其他文件夹中的文件旨在进行构建/编译，并且不能通过URL直接访问。

您应该将images文件夹移到public文件夹中。就像这样：

/public/images/sample1.jpg

然后您将以如下方式访问它：

src="/images/sample1.jpg"

假设您正在使用create-react-app，这里是some info about the public folder。看起来他们希望您使用变量作为路径，但通常您只能使用根（/）。