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

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

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

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

Tout d'abord envelopper le src {}

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 branchez-le ...

<img src={logo} />

Je recommanderais cette option surtout si vous réutilisez la source d'image.

Le meilleur moyen 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>
    );
  }
} 

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

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

Vous devez utiliser requiresi vous utilisezwebpack

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

Dans le dossier public , créez un dossier d' actifs et placez le chemin de l'image en conséquence.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

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>
    );
  }
}

Vous pouvez procéder par deux voies.

Première

Importez l'image au-dessus de la classe, puis référencez-la dans votre <img/>élément comme ceci

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

Seconde

Vous pouvez directement spécifier le chemin d'image à l' aide require('../pathToImh/img')dans l' <img/>élément comme celui - ci

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

Ma réponse est fondamentalement très similaire à celle de Rubzen. J'utilise l'image comme valeur d'objet, btw. 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 wrappers - mais c'est aussi une application différente.

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

J'ai trouvé un autre moyen de mettre en œuvre cela (il s'agit d'un composant fonctionnel):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

J'espère que ça aide!

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

Je l'ai utilisé de cette façon, et cela fonctionne ... J'espère que vous utile.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

exporter l'image par défaut

Comme certains l'ont mentionné dans les commentaires, vous pouvez placer les images dans le dossier public. Ceci est également expliqué dans la documentation de Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/