REACT Je veux créer un ARRAY avec les noms des fichiers des images dans le DOSSIER PUBLIC mais je ne peux pas les atteindre car ils ne sont pas dans le dossier SCR. C'est sûrement quelque chose de basique mais ça me manque. ...

1
Gabriel 16 mars 2021 à 14:17

2 réponses

Meilleure réponse

Pour accéder au dossier public, vous devez utiliser process.env.PUBLIC_URL ou %PUBLIC_URL%:

<img src="%PUBLIC_URL%/images/some_image.png" />

Ou, alternativement en utilisant Javascript comme vous voulez un tableau:

const images = ['image_1.png', 'image_2.png']

return images.map(image => <img src=`${process.env.PUBLIC_URL}/images/${image}`

Autant que je sache, il n'y a aucun moyen de parcourir tous les fichiers du dossier public car webpack n'y a pas accès. Vous devrez les énumérer manuellement.

Si vous utilisez à la place le dossier src, il est possible d'utiliser l'importation pour utiliser de manière dynamique Regez. Cela ressemble à ceci (extrait de ici):

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

Soit dit en passant, sauf si vous avez une bonne raison de ne pas utiliser le dossier src (par exemple, les images sont utilisées en dehors de Javascript ou en dehors du projet React), il est recommandé d'ajouter tous les fichiers à l'intérieur du {{X1 }} en tant que webpack peut effectuer des optimisations supplémentaires, telles que l'insertion d'images (c'est-à-dire en utilisant URI de données ).

1
Yuan-Hao Chiang 16 mars 2021 à 11:38

Je ne suis pas sûr d'avoir compris votre question, vous souhaitez créer dynamiquement un tableau dans le code de votre application ReactJS?

Par exemple, si «/ public / image» contient «img1.png», «img2.png», vous obtiendrez

myArray = ['img1.png', 'img2.png']

0
Julien Ripet 16 mars 2021 à 11:33