web-dev-qa-db-ja.com

画像のグループを配列としてインポートすることは可能ですか？ （create-react-appプロジェクト）

画像のグループを配列としてインポートすることは可能ですか？ （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
];
javascriptimportcreate-react-appes6-modules
9
user38455

それらを配列として直接インポートすることはできませんが、これらのインポート専用のファイルを使用できます。

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

次に、この配列を他のファイルに1行でインポートします。

import hatsArr from './images';

編集：この1行のインポートを実現するために、webpack.config.jsでいくつかのトリッキーなことを行うことができると思いますが、それを助けることはできません。

3
Dyo

以下のように、これらの画像をエクスポートするための別のファイルを作成できます。

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

1
Jayavel

私はここで言及されたものの解決策のハイブリッドを持っています

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を追加するだけでよいことに注意してください。

このようにして、1つのキーワードを使用するだけで、画像とロジックを1つのファイルに収めることができます。

0
Milan Adamovsky