web-dev-qa-db-fra.com

ReactJS et les images du dossier public

Je suis nouveau dans ReactJS et je veux 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 à partir du composant react. 

Des idées ?

MODIFIER

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

Le dossier de structure est:

 enter image description here

Je n'utilise pas Webpack. Devrais-je ?

Edit 2

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

 enter image description here

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

Merci

javascriptreactjs
19
Aceconhielo

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

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

<img src="/image.jpg">
28
Bimal Grg

Les composants de réaction dans le dossier de composants n'ont aucune notion du répertoire public. En conséquence, quelque chose comme './images...' ne fonctionnera pas. Plutôt dans votre composant de bouton ont une importation comme ceci:

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

C'est le moyen privilégié d'importer des ressources statiques dans un composant react. Et vous pouvez utiliser cet import comme suit:

<Button srcAsProp={myImage}/>

ou simplement:

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

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

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

Pour référencer des images en public, il existe deux manières de procéder. On est comme en haut de Homam Bahrani.

en utilisant 

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

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

    <img src={window.location.Origin + '/yourPathHere.jpg'} />
2
Gerard

Vous devriez utiliser webpack ici pour vous simplifier 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 de réaction:

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>
1
Umesh

1- C’est bien si vous utilisez webpack pour les configurations mais vous pouvez simplement utiliser le chemin de l’image et réagir en sachant qu’il est dans le répertoire public.

<img src="/image.jpg">

2- Si vous souhaitez utiliser webpack, pratique courante 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
          }
        }
      ]
    }
  ],
},

vous pouvez ensuite importer un fichier image dans les composants de réaction et l’utiliser.

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

<img src={image}/>
1
Hassan Ajaz

Nous savons que React est SPA. Tout est rendu à partir du composant racine par En passant au HTML approprié à partir de JSX.

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

Dans votre cas, cela devrait fonctionner partout:

"./images/logofooter.png"

0
Karthik Sagar