ReactJS et images dans le dossier public

Je suis nouveau dans ReactJS et je souhaite importer des images dans un composant. Ces images sont à l'intérieur du dossier public et je ne sais pas comment accéder au dossier depuis le composant react.

Des idées ?

ÉDITER

Je souhaite importer une image dans Bottom.js ou Header.js

Le dossier de structure est:

Je n'utilise pas webpack. Devrais-je ?

Modifier 2

Je souhaite utiliser webpack pour charger les images et le reste des ressources. Donc, dans mon dossier de configuration, j'ai les fichiers suivants:

Où dois-je ajouter les chemins des images et comment?

Merci

Pour référencer des images en public, je sais comment procéder de deux manières. L'un est comme ci-dessus de Homam Bahrani.

en utilisant

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

Et comme cela fonctionne, vous n'avez vraiment besoin de rien d'autre, mais cela fonctionne aussi ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Vous n'avez besoin d'aucune configuration Webpack pour cela.

Dans votre composant, indiquez simplement le chemin de l'image. Par défaut, react le saura dans le répertoire public.

<img src="/image.jpg" alt="image" />

les documents de réaction expliquent cela bien dans la documentation, vous devez utiliser process.env.PUBLIC_URLavec des images placées dans le dossier public. Voir ici pour plus d'informations

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- C'est bien si vous utilisez webpack pour les configurations mais vous pouvez simplement utiliser le chemin de l'image et react découvrira que c'est dans le répertoire public.

<img src="/image.jpg">

2- Si vous souhaitez utiliser webpack qui est une pratique standard dans React. Vous pouvez utiliser ces règles dans votre fichier webpack.config.dev.js.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

alors vous pouvez importer le fichier image dans les composants de réaction et l'utiliser.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Nous savons que React est SPA. Tout est rendu à partir du composant racine en développant le code HTML approprié à partir de JSX.

Donc, peu importe où vous souhaitez utiliser les images. La meilleure pratique consiste à utiliser un chemin absolu (en référence à public). Ne vous inquiétez pas des chemins relatifs.

Dans votre cas, cela devrait fonctionner partout:

"./images/logofooter.png"

Vous devriez utiliser webpack ici pour vous faciliter la vie. Ajoutez la règle ci-dessous dans votre configuration:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

Après cela, vous pouvez simplement importer les images dans vos composants react:

import myImage from 'publicfolder/images/Image1.png'

Utilisez myImage comme ci-dessous:

<div><img src={myImage}/></div>

ou si l'image est importée dans l'état local du composant

<div><img src={this.state.myImage}/></div> 

Vous pouvez également utiliser ceci .. cela fonctionne en supposant que «yourimage.jpg» se trouve dans votre dossier public.

<img src={'./yourimage.jpg'}/>