是否可以将一组图像作为数组导入？ （create-react-app项目） [英] Is it possible to import a group of images as an array? (create-react-app project)

问题描述

是否可以将一组图像作为数组导入？ （create-react-app项目）如下所示，但作为一个单行？

Is it possible to import a group of images as an array? (create-react-app project) like written below but as a single-line?

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
];

推荐答案

你可以写一个单独的文件来导出那些图像下面：

You can write a separate file to export those images like below:

var AppData = {


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

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

and import it in your component like below:

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

希望通过导出，导入来帮助和工作演示喜欢这个
演示

Hope this would help and working demo by exporting,importing like this demo

这篇关于是否可以将一组图像作为数组导入？ （create-react-app项目）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！