在反应中导入多个文件

Posted 2023-02-22

【中文标题】在反应中导入多个文件

【英文标题】：Importing multiple files in react

【发布时间】：2017-11-20 07:15:27

【问题描述】：

我正在为我的 react 项目使用 create-react-app。它已经为导入图像配置了 webpack。我希望将多个图像（比如 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 ``不起作用，因为它将变量转换为字符串）

【参考方案1】：

您不能使用单个 import 语句，因为 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'] />

Source.

【讨论】：

有什么办法可以把这段代码放在一个实用程序文件中，并将路径作为参数传递，以避免在每个组件 .jsx 文件中编写这个函数？我试过export default function importImages(imagesDirectory) return importAll( require.context(imagesDirectory, false, /\.(png|jpe?g|svg)$/) ); 但这会引发TypeError: __webpack_require__(...).context is not a function 错误。

@SushmitSagar require.context() 中的所有内容都必须是文字，因此您不能传入像 imagesDirectory 这样的变量

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

【参考方案2】：

您可以通过此功能从一个文件夹中导入所有图像

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


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

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

【参考方案3】：

在 public 文件夹内创建一个 images 文件夹，在 src 文件夹外可以看到。

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

src="images/imageName.format"

不要使用 src='../public'。它会显示一个错误。

React 会自动找到你提到的文件夹

【参考方案4】：

我认为也许更好的办法是为您的图像文件夹使用 index 文件。

假设你有这样的结构：

您需要将所有图片导入到您的 HomePage 组件中。 您可以轻松地在 images 文件夹中创建一个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 命名导入：

图像/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
;

【参考方案5】：

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

图片文件夹

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 />
    )

【参考方案6】：

只需在公共文件夹中创建包含所有图像的 img 文件夹，然后就可以了

src="/img/logo_main.png"

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

【参考方案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 脚本在我们的应用程序之外创建这个文件 否则使用这种方法根本没有意义，因为我们可以在需要图像的反应组件内部实现多个导入行；当然我们需要知道我们要导入什么和多少文件）

在我们需要这些图像的组件内部（这里在 /src/components/app/imageGallery/ 中称为 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”的所有图像。

【讨论】：

这是 OP 想要避免的。

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