在React中导入多个文件

Question

我正在为我的React项目使用create-react-app。它已经配置了webpack来导入图像。我希望从一个图像文件夹中导入多个图像（比如10张）到一个组件中。最简单的方法是添加多个import语句，例如-

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的``不起作用，因为它将变量转换为字符串）。

- Aron Karmer

Answer 1

我认为更好的做法是为您的图像文件夹使用一个索引文件。

假设您有以下结构:

并且您需要将所有图像导入到您的主页组件中。 您可以轻松地在您的 图像 文件夹中创建一个 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:

import Background from './bg/background.jpg';
import First from './photos/first.jpg';
import Second from './photos/second.jpg';
import LinkedIn from './social/linkedin.png';

export {
  Background,
  First,
  Second,
  LinkedIn
};

- Анна

Answer 2

你不能使用单个导入语句，因为import和export的整个意义在于可以静态地确定依赖关系，即在不执行代码的情况下进行，但是您可以这样做：

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

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

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

来源.

- cs95

---

有没有办法将这段代码放在实用程序文件中，并将路径作为参数传递，以避免在每个 .jsx 文件中编写此函数？我尝试了以下代码：export default function importImages(imagesDirectory) { return importAll( require.context(imagesDirectory, false, /\.(png|jpe?g|svg)$/) ); }但是会报错TypeError: __webpack_require__(...).context is not a function。 - Sushmit Sagar

@SushmitSagar require.context() 中的所有内容都必须是字面量，因此您不能传递变量，例如 imagesDirectory。 - Qwerp-Derp

'/\.png/' 应该是 /\.png/ （正则表达式而不是字符串） - Asu

我正在使用这个语句，但是出现了错误“require is not defined”@VityaSchelexport const imagesAll = importAll( require.context("../assets/appleImgs", false, "/.jpg/") ); - ShoaibShebi

Answer 3

我不确定这是一个好方法，但我也在寻找如何将多个图像导入到组件中。然而，我希望像导入模块一样导入图像。

图像文件夹

• a.png
• b.png
• c.png
• index.js

index.js

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（）中的用法

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

- Stephen Lee

---

请注意：您应该使用import images from './index'而不是from './images'，或者将index.js重命名为images.js。 - Jimmy Adaro

Answer 4

您可以使用此函数从文件夹中导入所有图像。

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

images 是一个模块的对象。你可以通过 images[index].default 访问文件路径。

- saeed eivazi

Answer 5

在public文件夹中创建一个名为“images”的文件夹，该文件夹可以在src文件夹外部看到。

要在组件中调用图像，请执行以下操作：

src="images/imageName.format"

不要使用src ='../public'，否则会显示错误。

React将自动查找您已经提到的文件夹。

- Muhammed Shahid

Answer 6

只需在公共文件夹中创建img文件夹，并将所有图像放入其中，然后您就可以执行此操作。

src="/img/logo_main.png"

https://www.youtube.com/watch?v=taMJct5oeoI

- Andrew

Answer 7

一种对上述答案的混合方法，可能更加清晰，至少对我来说是：

在文件夹内（例如 /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，位于/src/components/app/imageGallery/）：

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;

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

- Seim2k20

---

那就是 OP 想要避免的。 - Sameer Kumar Jain

@SaachiTech 你能再解释一下吗？谢谢。 - Seim2k20

Answer 8

我建议采用另一种方法，在Reactjs中逐个导入图像并添加到对象数组中并不是一个理想的方式来使用图像。

// images.js
const IMAGES = {
  apple: require('./apple.jpg').default,
  cherry: require('./cherry.jpg').default
}

export default IMAGES

// App.js
import IMAGES from "./images"

// USAGE OPTION 1 
const IMAGE = {...IMAGES}
<img src={IMAGE.apple} />


// USAGE OPTION 2
const { cherry } = IMAGES
<img src={cherry} />

- GMKHussain