如何在 React 组件中创建一组导入的图像？

Question

我有一个 React 组件，它将包含将近一百张图片，因此想通过一个导入语句从另一个 JavaScript 文件加载它们。

但首先我需要弄清楚如何以某种方式将它们全部放入一个数组中，以便我可以从 JavaScript 文件中导出它们。

可能是这样的吗:

所以我可以像这样访问图像？

Answer 1

bulkImages.js v1（你的方法可行）

import image1 from './images/image1.jpg'
import image2 from './images/image2.jpg'
import image3 from './images/image3.jpg'
import image4 from './images/image4.jpg'
import image5 from './images/image5.jpg'


const bulkImages = [
  image1,
  image2,
  image3,
  image4,
  image5,
];

export default bulkImages;

bulkImages.js v2（但这个版本较短）

const bulkImages = [
  './images/image1.jpg',
  './images/image2.jpg',
  './images/image3.jpg',
  './images/image4.jpg',
  './images/image5.jpg'
];

export default bulkImages;

要在组件中显示来自 array 的图像，请使用 map() 函数。

YourComponent.js

import React from 'react';

// images data
import bulkImages from './bulkImages';

export default function YourComponent() {
  return (
    <div className="bulkImageArea">
      {bulkImages.map((img) => (
        <img key={img} src={img} alt={img} className="bulkImage" />
      ))}
    </div>
  );
}

如何在 React 组件中创建一组导入的图像？

How can I create an array of imported images in a React Component?

components

image

reactjs