是否可以将一组图像作为数组导入？ （create-react-app项目）

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

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

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做一些棘手的事情来实现这一行导入，但对此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>
    );
  }
}

希望通过导出，导入像这个演示 ，这将有助于和工作演示

Answer 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 ...

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

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