是否可以將一組圖像作為數組導入？ （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 。

這樣，您只需一個關鍵字就可以將圖像和邏輯放在一個文件中。