web-dev-qa-db-fra.com

Comment importer une image (.svg, .png) dans un composant React

J'essaie d'importer un fichier image dans l'un de mes composants de réaction. J'ai la configuration du projet avec Web Pack

Voici mon code pour le composant

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

Voici la structure de mon projet.

enter image description here

J'ai configuré mon fichier webpack.config.js de la manière suivante

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS Je peux obtenir une image de toute autre source distante, mais pas des images enregistrées localement. La console JavaScript ne me donne pas non plus d'erreur. S'il vous plaît, tout aide. Je suis assez nouveau pour réagir et incapable de trouver ce que je fais mal.

javascriptreactjswebpack
49
Shadid

essayez d'utiliser

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}
89
user5660307

Vous pouvez également utiliser require pour rendre des images telles que

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}
3
Hemadri Dasari

Si les images se trouvent dans le dossier src/assets, vous pouvez utiliser require avec le chemin correct dans l'instruction require.

var Diamond = require('../../assets/linux_logo.jpg');

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}
2
Rohith Murali
import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits


class App extends React. Component{
    constructor(props){
     super(props)
     this.state={
      imagesrc=imagename // as it is imported
     }
   }

   render(){
       return (

        <ImageClass 
        src={this.state.imagesrc}
        />
       );
   }
}

class ImageClass extends React.Component{
    render(){
        return (

            <img src={this.props.src} height='200px' width='100px' />
        );
    }
}

export default App;
0
Matiullah Mosazai