web-dev-qa-db-fra.com

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

Comment puis-je charger une image à partir d'un 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 <img src="one.jpeg" /> et <img src={"one.jpeg"} /> dans ma fonction render mais l'image ne s'affiche pas. De plus, je n’ai pas accès au fichier webpack config puisque le projet est créé avec la commande officielle create-react-app util.

Mise à jour: Cela fonctionne si je commence par importer l'image avec import img from './one.jpeg' et que je l'utilise dans img src={img}, mais j'ai tellement de fichiers image à importer et je souhaite donc les utiliser sous la forme, img src={'image_name.jpeg'}. 

reactjs
58
Zip

Le meilleur moyen consiste à importer d'abord l'image, puis à 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>
    );
  }
}
44
Arslan shakoor

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

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

Vous devez utiliser require si vous utilisez webpack

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

le meilleur moyen 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>
    );
  }
}
3
Abdul Moiz

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 une application différente aussi.

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

1
Kiszuriwalilibori
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}/>
   );
  }
}

export par défaut Image

0
LOVENEET SINGH

J'ai utilisé cette méthode et ça marche ... j'espère que vous serez utile.

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

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

Dans le dossier public, créez un dossier assets 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"/>
0
Harshvardhan Singh Baghel
import image from './img/one.jpg';

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