在react中导入多个文件

Question

我正在为我的反应项目使用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';
...

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

Answer 1

我认为也许更好的主意是为您的图像文件夹使用索引文件。

假设你有这样的结构：

并且您需要将所有图像导入HomePage组件。您可以轻松地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'

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

希望能帮助到你！;)

25/04/2021 更新：

如果要使用 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
};

Answer 2

您不能使用单个import语句,但可以这样做:

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']} />

来源.

Answer 3

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

图片文件夹

• a.png
• b.png
• c.png
• 索引.js

索引.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} />
    )
}

Answer 4

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

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

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

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