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

Question

是否可以将一组图像作为数组导入？（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
];

Answer 1

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

图像.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来实现这一行导入，但对此无能为力。

Answer 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>
    );
  }
}

希望这能通过像这个演示一样导出、导入来帮助和工作演示