我正在为我的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 `` 不起作用，因为它将变量转换为字符串）
我认为也许更好的主意是为您的图像文件夹使用索引文件。
假设你有这个结构：
并且您需要将所有图像导入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
};
你不能使用一个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']} />
来源。
我不确定这真的是一个好方法，但我也在寻找如何将多个图像导入到组件中。但是，我想像module一样导入图像
图片文件夹
索引.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} />
)
}
在 public 文件夹内创建一个图像文件夹，该文件夹可以在 src 文件夹外看到。
要在组件中调用图像，请执行以下操作：
src="图像/图像名称.格式"
不要使用 src='../public'。它会显示错误。
React 会自动找到你提到的文件夹
您可以通过此功能从文件夹中导入所有图像
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
那images是 Module 的一个对象。您可以通过以下方式访问文件路径images[index].default