web-dev-qa-db-fra.com

Importation de plusieurs fichiers dans react

J'utilise create-react-app pour mon projet react. Il a configuré webpack pour importer des images. Je souhaite importer plusieurs images (disons 10) d'un dossier d'images dans un composant. La façon la plus simple de procéder serait d'ajouter plusieurs instructions d'importation telles que -

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

Le code ci-dessus ne serait pas un bon choix lorsque nous avons plusieurs fichiers à importer. Existe-t-il un moyen d'ajouter les instructions d'importation dans une boucle? J'ai essayé d'ajouter une boucle mais je n'ai pas pu modifier les variables Img0, Img1 etc. (en utilisant ES6 `` n'a pas fonctionné car il a converti la variable en chaîne)

javascriptreactjsecmascript-6
12
Aron Karmer

Vous ne pouvez pas utiliser une seule instruction d'importation, mais vous pouvez le faire:

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/'));

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

Source .

12
cs95