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

Question

Comment puis-je charger une image à partir du répertoire local et l'inclure dans la balise reactjs img src ?

J'ai une image appelée one.jpeg dans le même dossier que mon composant et j'ai essayé à la fois ![](one.jpeg) et ![]({"one.jpeg"}) à l'intérieur de ma fonction render mais l'image n'apparaît pas. De plus, je n'ai pas accès au fichier de configuration de webpack car le projet est créé avec l'utilitaire en ligne de commande officiel create-react-app.

Mise à jour : Cela fonctionne si j'importe d'abord l'image avec import img from './one.jpeg' et l'utilise à l'intérieur de img src={img}, mais j'ai tellement de fichiers image à importer et donc, je veux les utiliser sous la forme img src={'nom_de_l_image.jpeg'}.

Answer 1

Tout d'abord, enveloppez le src dans {}

Ensuite, si vous utilisez Webpack; Au lieu de : ![]({"./logo.jpeg"})

Il se peut que vous ayez besoin d'utiliser require:

![]({require('./logo.jpeg')})

---

Une autre option serait d'abord d'importer l'image comme ceci:

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

ou ...

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

puis insérez-le...

![]({logo})

Je recommanderais cette option notamment si vous réutilisez la source de l'image.

Answer 2

La meilleure façon 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 (

    );
  }
}

Answer 3

Vous devez envelopper le chemin de votre source d'image dans {}

Vous devez utiliser require si vous utilisez webpack

Answer 4

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

import React, { Component } from 'react';

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

 class App extends Component {
  render() {
    return (

         // Appeler l'image dans la source comme ceci

    );
  }
}

Answer 5

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

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

ou

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

Sans enveloppes - mais c'est une application différente aussi.

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