Comment référencer une image locale dans React ?

Question

Comment puis-je charger une image à partir d'un répertoire local et l'inclure dans l'application reactjs img src tag ?

J'ai une image appelée one.jpeg dans le même dossier que mon composant et j'ai essayé à la fois <img src="one.jpeg" /> et <img src={"one.jpeg"} /> à l'intérieur de mon render mais l'image ne s'affiche pas. De plus, je n'ai pas accès à webpack config puisque le projet est créé avec le fichier officiel create-react-app utilitaire de ligne de commande.

Mise à jour : Cela fonctionne si j'importe d'abord l'image avec import img from './one.jpeg' et l'utiliser à l'intérieur img src={img} mais j'ai beaucoup de fichiers d'images à importer et je veux donc les utiliser dans le formulaire, img src={'image_name.jpeg'} .

Answer 1

Tout d'abord, enveloppez le src dans {}

Ensuite, si vous utilisez Webpack ; Au lieu de : <img src={"./logo.jpeg"} />

Vous devrez peut-être utiliser require :

<img src={require('./logo.jpeg')} />

---

Une autre option serait d'importer d'abord l'image en tant que telle :

import logo from './logo.jpeg'; // with import

ou ...

const logo = require('./logo.jpeg); // with require

puis le brancher...

<img src={logo} />

Je recommande cette option, surtout si vous réutilisez la source de l'image.

Answer 2

Le mieux est d'importer d'abord l'image, puis de l'utiliser.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
}

Answer 3

Vous devez inclure le chemin d'accès à la source de l'image à l'intérieur de {}

<img src={'path/to/one.jpeg'} />

Vous devez utiliser require si vous utilisez webpack

<img src={require('path/to/one.jpeg')} />

Answer 4

La meilleure façon d'importer une image est...

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

Answer 5

Ma réponse est fondamentalement très similaire à celle de Rubzen. J'utilise l'image comme valeur de l'objet, d'ailleurs. Deux versions fonctionnent pour moi :

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

ou

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

Sans emballage - mais c'est aussi une autre application.

J'ai également vérifié la solution "import" et dans quelques cas, cela fonctionne (ce qui n'est pas surprenant, c'est appliqué dans le modèle App.js dans React), mais pas dans le cas comme le mien ci-dessus.