web-dev-qa-db-fra.com

Charger des images locales dans React.js

J'ai installé React en utilisant create-react-app. L’installation s’est bien passée, mais j’essaie de charger une image dans l’un de mes composants (Header.js, chemin du fichier: src/components/common/Header.js), mais elle ne se charge pas. Voici mon code: 

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>

        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
            <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
}

Si j'écris le chemin de l'image sous la forme src={require('./src/images/logo.png')} dans ma variable logo1, cela donne l'erreur: 

Échec de la compilation.

Erreur dans ./src/Components/common/Header.js

Module introuvable: ./src/images/logo.png dans/var/www/html/wistful/src/Components/common

S'il vous plaît aidez-moi à résoudre ce problème. Faites-moi savoir ce que je fais mal ici. 

imagereactjslocal
16
Atul

Si vous avez des questions sur la création de React App, je vous encourage à lire son Guide de l'utilisateur .
Il répond à cette question et à bien d’autres.

Plus précisément, pour inclure une image locale, vous avez deux options:

  1. Utilisation des importations :

    // Assuming logo.png is in the same folder as JS file
import logo from './logo.png';

// ...later
<img src={logo} alt="logo" />

Cette approche est intéressante car tous les actifs sont gérés par le système de génération et obtiendront des noms de fichiers avec des hachages dans la génération de production. Vous obtiendrez également une erreur si le fichier est déplacé ou supprimé.

L’inconvénient est que cela peut devenir lourd si vous avez des centaines d’images, car vous ne pouvez pas avoir de chemins d’importation arbitraires.

  1. Utilisez le dossier public:

    // Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

Cette approche n’est généralement pas recommandée, mais elle est intéressante si vous avez des centaines d’images et que leur importation une par une est trop compliquée. L'inconvénient est que vous devez réfléchir vous-même à la suppression du cache et faire attention aux fichiers déplacés ou supprimés.

J'espère que cela t'aides!

41
Dan Abramov

Si vous voulez charger l’image avec un local relative URL comme vous le faites. Le projet React a un dossier public par défaut. Vous devriez mettre votre dossier images à l'intérieur. Ça va marcher.

 enter image description here

5
Rivon

Vous avez différents moyens d'y parvenir, voici un exemple:

import myimage from './...' // wherever is it.

dans votre tag img, mettez ceci dans src:

<img src={myimage}...>

Vous pouvez également consulter les documents officiels ici: https://facebook.github.io/react-native/docs/image.html

2
Adolfo Onrubia

Au lieu d'utiliser img src = "", essayez de créer un div et définissez background-image comme image souhaitée.

En ce moment, ça marche pour moi.

exemple:

App.js

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  render() {
    return (
      <div>
        <div className="myImage"> </div>
      </div>
    );
  }
}

export default App;

App.css

.myImage {
  width: 60px;
  height: 60px;
  background-image: url("./icons/add-circle.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
1
Paulo Ravaiano

Afin de charger des images locales dans votre application React.js, vous devez ajouter le paramètre require dans les sections de média, telles que ou les balises Image, comme ci-dessous:

image={require('./../uploads/temp.jpg')}
0
Alex Trn