是否可以将一组图像作为数组导入？（创建反应应用项目）答案

【问题标题】：Is it possible to import a group of images as an array? (create-react-app project)是否可以将一组图像作为数组导入？（创建反应应用项目）
【发布时间】：2018-02-01 10:31:58
【问题描述】：

是否可以将一组图像作为数组导入？（create-react-app 项目）像下面写的但作为单行？

import Hat1 from '../../assets/img/accesories/hats/hat1.png';
import Hat2 from '../../assets/img/accesories/hats/hat2.png';
import Hat3 from '../../assets/img/accesories/hats/hat3.png';
import Hat4 from '../../assets/img/accesories/hats/hat4.png';
import Hat5 from '../../assets/img/accesories/hats/hat5.png';
import Hat6 from '../../assets/img/accesories/hats/hat6.png';

const hatsArr = [
    Hat1,
    Hat2,
    Hat3,
    Hat4,
    Hat5,
    Hat6
];

【问题讨论】：

import modules from files in directory的可能重复

标签： javascript import create-react-app es6-modules

【解决方案1】：

您不能直接将它们作为数组导入，但可以使用专用于这些导入的文件：

images.js：

import Hat1 from '../../assets/img/accesories/hats/hat1.png';
import Hat2 from '../../assets/img/accesories/hats/hat2.png';
import Hat3 from '../../assets/img/accesories/hats/hat3.png';
import Hat4 from '../../assets/img/accesories/hats/hat4.png';
import Hat5 from '../../assets/img/accesories/hats/hat5.png';
import Hat6 from '../../assets/img/accesories/hats/hat6.png';

export default [
    Hat1,
    Hat2,
    Hat3,
    Hat4,
    Hat5,
    Hat6
];

然后在其他文件的一行中导入这个数组：

import hatsArr from './images';

编辑：我认为您可以在 webpack.config.js 中做一些棘手的事情来实现这一行导入，但对此无能为力。

【讨论】：

【解决方案2】：

您可以编写一个单独的文件来导出这些图像，如下所示：

var AppData = {


adata: {
    "initialdata":[
      {
      "text":"",
      "image":"images/slider1.png"
      },
      {
      "text":"",
      "image":"images/slider2.png"
      },
      {
      "text":"",
      "image":"images/slider3.png"
      }
    ]
  }
}
export default AppData;

并将其导入到您的组件中，如下所示：

import AppData from './AppData';

class App extends Component {
  constructor() {
    super();
    this.state = AppData.adata;
  }

  render() {
    return (
      <ul className="slider">
        {this.state.initialdata.map(function(item,index) {
            return (
                <li key={index}>
                 <img className="sliderImage" src={`./${item.image}.png`} role="presentation" alt="image"/>
                </li>       
            )
        },this)}
      </ul>
    );
  }
}

希望通过像这样的导出、导入来帮助和工作演示 demo

【讨论】：

谢谢，我正在寻找一个简短的语法答案，但这是一个优雅的解决方案。

【解决方案3】：

我有一个混合了这里提到的解决方案

import Hat1 from '../../assets/img/accesories/hats/hat1.png';
import Hat2 from '../../assets/img/accesories/hats/hat2.png';
import Hat3 from '../../assets/img/accesories/hats/hat3.png';
import Hat4 from '../../assets/img/accesories/hats/hat4.png';
import Hat5 from '../../assets/img/accesories/hats/hat5.png';
import Hat6 from '../../assets/img/accesories/hats/hat6.png';

export const hatsArr = [
    Hat1,
    Hat2,
    Hat3,
    Hat4,
    Hat5,
    Hat6
];

... your logic goes here ...

请注意，您所要做的就是在您的前面添加export const。

这样，您只需一个关键字即可将图像和逻辑放在一个文件中。

【讨论】：