Charger des images locales dans React.js

J'ai installé Réagir à l'aide de create-react-app. Il est installé correctement, mais je suis en train de charger une image dans un de mes composants (Header.js, chemin d'accès du fichier: src/components/common/Header.js) mais ce n'est pas de chargement. 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 en src={require('./src/images/logo.png')} dans mon logo1 variable, il donne l'erreur:

Réussi à compiler.

D'erreur ./src/Components/common/Header.js

Module non trouvé: ./src/images/logo.png dans le répertoire /var/www/html/nostalgique/src/Composants/commune

Merci de m'aider à résoudre ce problème. Laissez-moi savoir ce que je fais de mal ici.

OriginalL'auteur Atul | 2017-05-24

44

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 que vous pourriez avoir.

Plus précisément, pour inclure une image locale, vous avez deux options:
1. Le recours aux importations:
```
//Assuming logo.png is in the same folder as JS file
import logo from './logo.png';

//...later
<img src={logo} alt="logo" />
```
De cette approche est grand parce que tous les actifs sont gérés par le système de construction, et d'obtenir les noms de fichiers avec des hachages dans la production de construire. Vous allez avoir un message d'erreur si le fichier est déplacé ou supprimé.

Revers de la médaille, il peut devenir fastidieux si vous avez des centaines d'images parce que vous ne pouvez pas avoir d'arbitraire importer des chemins.
1. Utiliser 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é, mais il est grand si vous avez des centaines d'images et de les importer un par un, c'est trop de tracas. L'inconvénient est que vous devez penser de contournement du cache et de regarder pour déplacé ou supprimé des fichiers vous-même.

Espérons que cette aide!

OriginalL'auteur Dan Abramov
8

Si vous voulez charger une image avec un local relative URL comme vous le faites. Réagir projet a un défaut public dossier. Vous devriez mettre votre images dossier à l'intérieur. Il va travailler.

Cela devrait me l'a accepté la réponse à comment localement importer des images
Je recherche beaucoup, mais il y a très délicate solution pour fournir de manière indirecte pour le résoudre! mais votre solution est la meilleure réponse en fait parce que c'était le bon endroit pour les garder actifs. Merci

OriginalL'auteur Rivon
2

Vous avez différents moyens pour y parvenir, voici un exemple:
```
import myimage from './...' //wherever is it.
```
dans votre balise img en src:
```
<img src={myimage}...>
```
Vous pouvez également vérifier officiel de docs ici: https://facebook.github.io/react-native/docs/image.html

Thx Adolfo pour ur répondre, Son bien, mais j'ai autour de 15 images à charger sur la même page et définir chaque image n'est pas un bon moyen je pense . il devrait y avoir une autre façon. Svp laissez-moi savoir Si vous avez une idée.
Yep, vous avez demandé juste pour un. Mais bien sûr, si vous avez 1 ou 100 vous avez besoin à appeler un de toute façon. J'utilise numérotés fils comme img-1, img-2.... Et puis vous pouvez faire une boucle par le biais d'un indice ou quelque chose comme ça. Exemple: pour (let i=1; i<15; i++) { laisser img[i] = ./images/img-${i} } Avec cela, vous obtenez une img[0,1,2,3... que vous pouvez gérer dans une meilleure façon
je vous remercie, mais ce devrait être l'extrême dernière approche 😉

OriginalL'auteur Adolfo Onrubia

Au lieu d'utiliser img src="", essayez de créer un div et d'arrière-plan-image de l'image que vous voulez.

Maintenant, c'est de travailler 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%;
}

Veuillez fournir des exemples de code de votre solution pour plus de clarté
J'ai édité pour donner un exemple.

OriginalL'auteur Paulo Ravaiano

0

Afin de charger des images locales pour votre React.js application, vous devez ajouter require paramètre dans les médias rubriques ou des balises d'Image, comme ci-dessous:
```
image={require('./../uploads/temp.jpg')}
```
OriginalL'auteur Alex Trn

Vous devez vous connecter pour publier un commentaire.