Importez dynamiquement des images à partir d'un répertoire à l'aide de webpack

Voici donc mon flux de travail actuel pour l'importation d'images et d'icônes dans Webpack via ES6:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

Cela devient vite compliqué. Voici ce que je veux:

import * from './images'

<img src={doggy} />
<img src={turtle} />

J'ai l'impression qu'il doit y avoir un moyen d'importer dynamiquement tous les fichiers d'un répertoire spécifique sous leur nom sans extension, puis d'utiliser ces fichiers selon les besoins.

Quelqu'un a-t-il vu cela fait, ou a-t-il des idées sur la meilleure façon de procéder?

METTRE À JOUR:

En utilisant la réponse sélectionnée, j'ai pu faire ceci:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

J'ai l'impression qu'il doit y avoir un moyen d'importer dynamiquement tous les fichiers d'un répertoire spécifique sous leur nom sans extension, puis d'utiliser ces fichiers selon les besoins.

Pas dans ES6. L'intérêt de importet exportest que les dépendances peuvent être déterminées de manière statique , c'est-à-dire sans exécuter de code.

Mais puisque vous utilisez webpack, jetez un œil à require.context. Vous devriez pouvoir effectuer les opérations suivantes:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

C'est facile. Vous pouvez utiliser require(une méthode statique, l'importation est juste pour les fichiers dynamiques) dans le render. Comme l'exemple ci-dessous:

render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return (
    <img src={graphImage}/>
    )
}

J'ai un répertoire des drapeaux de pays png nommés comme au.png, nl.png etc. Donc j'ai:

-svg-country-flags
 --png100px
   ---au.png
   ---au.png
 --index.js
 --CountryFlagByCode.js

index.js

const context = require.context('./png100px', true, /.png$/);

const obj = {};
context.keys().forEach((key) => {
  const countryCode = key.split('./').pop() // remove the first 2 characters
    .substring(0, key.length - 6); // remove the file extension
  obj[countryCode] = context(key);
});

export default obj;

J'ai lu un fichier comme celui-ci:

CountryFlagByCode.js

import React from 'react';
import countryFlags from './index';

const CountryFlagByCode = (countryCode) => {
    return (
        <div>
          <img src={countryFlags[countryCode.toLowerCase()]} alt="country_flag" />
        </div>
      );
    };

export default CountryFlagByCode;

Une approche fonctionnelle pour résoudre ce problème:

const importAll = require =>
  require.keys().reduce((acc, next) => {
    acc[next.replace("./", "")] = require(next);
    return acc;
  }, {});

const images = importAll(
  require.context("./image", false, /\.(png|jpe?g|svg)$/)
);

MISE À JOUR Il semble que je n'ai pas bien compris la question. @Felix a bien compris, alors vérifiez sa réponse. Le code suivant fonctionnera uniquement dans un environnement Nodejs.

Ajouter un index.jsfichier dans le imagesdossier

const testFolder = './';
const fs = require('fs');
const path = require('path')

const allowedExts = [
  '.png' // add any extensions you need
]

const modules = {};

const files = fs.readdirSync(testFolder);

if (files && files.length) {
  files
    .filter(file => allowedExts.indexOf(path.extname(file)) > -1)
    .forEach(file => exports[path.basename(file, path.extname(file))] = require(`./${file}`));
}

module.exports = modules;

Cela vous permettra d'importer tout à partir d'un autre fichier et Wepback l'analysera et chargera les fichiers requis.