Javascript 无法从React.js中的本地库加载图像

我已经为我的网站编写了代码，不幸的是，我无法加载位于本地库中的图像。我已将我的图像文件夹移动到“src”文件夹中，但图像根本没有加载

下面是我试图加载的名为“横向”的组件的代码

代码：

import React，{Component}来自'React'；
从“react bootstrap”导入{网格、按钮、行、列、缩略图}；
导入“react引导转盘”；
导入“/scape.css”；
导出默认类扩展组件{
render（）{
返回(
大象
动物园


喜欢
{' '}
不喜欢

);
}}

我的答案仅适用于使用

create react app

或带有

文件加载器

插件的网页的情况

您必须先导入图片文件，然后才能使用它。为了使Webpack能够为生产构建正确地捆绑图像，必须这样做

import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">

从“/Pictures/1.jpg”导入pic1；
...

---

您可以阅读更多内容。

我的答案仅适用于您使用

create react app

或带有

file loader

插件的网页的情况

您必须先导入图片文件，然后才能使用它。为了使Webpack能够为生产构建正确地捆绑图像，必须这样做

import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">

从“/Pictures/1.jpg”导入pic1；
...

---

您可以阅读更多信息。

如果您有一些图像，您可以直接将其导入组件中

import logo from './Pictures/1.jpg';

那就叫它

<img src={logo} alt="logo" width={"240"} height={"240"}  />

然后，您可以在组件中导入

images.js文件

：

import images from './images';

然后打电话给任何你想要的img：

      <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

---

如果您有一些图像，您可以直接将其导入组件中

import logo from './Pictures/1.jpg';

那就叫它

<img src={logo} alt="logo" width={"240"} height={"240"}  />

然后，您可以在组件中导入

images.js文件

：

import images from './images';

然后打电话给任何你想要的img：

      <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

---

将所有图像放在公用文件夹下的一个“图像”文件夹中，然后在项目中的任何位置，您都可以在img元素中使用以下路径：

---

它适用于项目启动，使用create react app

将所有图像放在公用文件夹下的一个“图像”文件夹中，然后在项目中的任何位置，您都可以在img元素中使用以下路径：

---

---

它适用于使用创建反应应用程序启动的项目

您使用的是webpack还是类似的东西？它不应该是

/Pictures/1.jpg

？希望您只希望它能在开发模式下工作。您使用的是

create react app

？您是直接将图像保存在src文件夹中还是为它们创建了一个文件夹？因为你的路径错误，你是在使用webpack还是类似的东西？它不应该是

/Pictures/1.jpg

？希望您只希望它能在开发模式下工作。您使用的是

create react app

？您是直接将图像保存在src文件夹中还是为它们创建了一个文件夹？因为你走错了路，非常感谢你。我试过了，成功了。如果我有50个图像显示为缩略图呢？导入每个图像将花费更多的时间，并且假设在将来，如果我需要替换其中一些图像，将花费更多的时间。如果没有50张图片，你应该考虑通过数据库来管理它们，并自动加载和显示它们在组件中的过程。或者至少在JSON文件中引用它们，如果你只想对所有图像进行迭代，它们都可以在一个数组中引用。或者，如果您想单独访问图像，可以使用键/值对。@PruthviRajGowda我刚刚编辑了我的答案，请查看。非常感谢您的回复！我是按照你解释的方式做的。你真棒！非常感谢你。我试过了，成功了。如果我有50个图像显示为缩略图呢？导入每个图像将花费更多的时间，并且假设在将来，如果我需要替换其中一些图像，将花费更多的时间。如果没有50张图片，你应该考虑通过数据库来管理它们，并自动加载和显示它们在组件中的过程。或者至少在JSON文件中引用它们，如果你只想对所有图像进行迭代，它们都可以在一个数组中引用。或者，如果您想单独访问图像，可以使用键/值对。@PruthviRajGowda我刚刚编辑了我的答案，请查看。非常感谢您的回复！我是按照你解释的方式做的。你真棒！