Javascript 在react中导入多个文件

我正在为我的react项目使用create react应用程序。它已配置用于导入图像的网页包。我希望将多个图像（比如10个）从一个图像文件夹导入到一个组件中。最简单的方法是添加多个导入语句，例如-

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

---

当我们有多个文件要导入时，上面的代码不是一个好的选择。有没有办法在循环中添加导入语句？我尝试添加for循环，但无法修改变量Img0、Img1等（使用ES6``无法工作，因为它将变量转换为字符串）

您不能使用单个导入语句，但可以这样做：

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./images', false, '/\.png/'));

<img src={images['0.png']} />

函数导入高度（r）{
让图像={}；
r、 keys（）.map（（项，索引）=>{images[item.replace（'./'，''）]=r（项）；}）；
返回图像；
}
const images=importAll（require.context（'./images'，false，'/\.png/'）；

---

.

我认为更好的办法是为您的图像文件夹使用索引文件

假设你有这样的结构：

您需要将所有图像导入主页组件。 您可以在图像文件夹中轻松创建一个

index.js

文件，使用require导出所有图像，如下所示：

export const Background = require('./bg/background.jpg');
export const First = require('./photos/first.jpg');
export const Second = require('./photos/second.jpg');
export const LinkedIn = require('./social/linkedin.png');

然后在组件上，您可以通过一次导入导入所有组件

import {
  Background,
  First,
  Second,
  LinkedIn
} from '../../assets/images'

这将是您的最终文件夹结构：

希望能有帮助！；）

于2021年4月25日更新：

如果要使用ES6命名导入：

images/index.js:

---

对于上述答案，至少对我来说，可能更为明确的一种混合方法是：

在包含许多图像的文件夹（例如/src/components/app/assets/png/icons）中，我们创建了一个文件：“index.js”，内容如下：

 export const file1 = require("./IconRed_100x100.png");
 export const file2 = require("./IconSilver_100x100.png");
 export const file3 = require("./IconWhite_100x100.png");
 export const file4 = require("./IconBrown1_100x100.png");
 export const file5 = require("./IconBrown2_100x100.png");
 export const file6 = require("./IconGray_100x100.png");
 export const file7 = require("./IconMetallic_100x100.png");
 export const file8 = require("./IconMetallic_100x100.png");
 export const file9 = require("./IconMetallic_100x100.png");
 export const file10 = require("./IconMetallic_100x100.png");
 ...

（我们可以通过python脚本在应用程序外部创建此文件 否则，使用这种方法将毫无意义，因为我们可以在react组件内部实现多个导入行，在其中我们需要图像；当然，我们需要知道要导入的文件和数量）

在我们需要这些图像的组件内部（这里称为ImageGallery-inside/src/components/app/ImageGallery/）：

import*as ALL from./assets/png/icons”；
常量itemsToRender=[]；
for（让x表示全部）{
控制台日志（x）；
itemsToRender.push(
);
}
函数ImageGallery（）{
返回(
{itemsToRender}
);
}
导出默认图像库；

---

然后，我们渲染了React组件ImageGallery中“/src/components/app/assets/png/icons”中的所有图像。

只需创建img文件夹，将所有图像放在公用文件夹中，然后就可以了

src=“/img/logo\u main.png”

---

我不确定这是否真的是一种好方法，但我也在寻找如何将多个图像导入组件。 但是，我想像导入模块一样导入图像

图像文件夹

• a、 巴布亚新几内亚
• b、 巴布亚新几内亚
• c、 巴布亚新几内亚
• index.js

index.js

导入图像的组件

在render（）中的用法

render（）{
返回(
)
}

我们是否可以将此代码放入实用程序文件中，并将路径作为参数传递，以避免在每个component.jsx文件中编写此函数？我尝试了

export default function importImages（imagesDirectory）{return importAll（require.context（imagesDirectory，false，/\（png | jpe？g | svg）$/）；

但这会抛出

TypeError:u webpack_require_uuuuuuuuu（…）。上下文不是函数

错误。@SushmitSagar

require.context（）

中的所有内容都必须是文字，因此，您不能传入像

imagesDirectory

'/\.png/'这样的变量。应该是

/\.png/

（正则表达式而不是字符串），这正是OP想要避免的。@SaachiTech您能解释一下吗？非常感谢。

 export const file1 = require("./IconRed_100x100.png");
 export const file2 = require("./IconSilver_100x100.png");
 export const file3 = require("./IconWhite_100x100.png");
 export const file4 = require("./IconBrown1_100x100.png");
 export const file5 = require("./IconBrown2_100x100.png");
 export const file6 = require("./IconGray_100x100.png");
 export const file7 = require("./IconMetallic_100x100.png");
 export const file8 = require("./IconMetallic_100x100.png");
 export const file9 = require("./IconMetallic_100x100.png");
 export const file10 = require("./IconMetallic_100x100.png");
 ...

 import * as ALL from "../assets/png/icons";

 const itemsToRender = [];
 for (let x in ALL) {
  console.log(x);
  itemsToRender.push(
    <div key={x} className="image-gallery-item">
     <img src={ALL[x]}></img>
    </div>
  );
 }

 function ImageGallery() {
 return (
   <>
    <div className="image-gallery">{itemsToRender}</div>
   </>
  );
 }

 export default ImageGallery;

import a from "./a.png";
import b from "./b.png";
import c from "./c.png";
const images = {
    a,
    b,
    c
}
export default images;

import images from './images'; //Your images folder location

render(){
    return(
         <img src={images.a} />
    )
}