Come posso fare riferimento a un'immagine locale in React?

Come posso caricare un'immagine dalla directory locale e includerla nel reactjs img srctag?

Ho un'immagine chiamata one.jpegall'interno della stessa cartella del mio componente e ho provato entrambi <img src="one.jpeg" />e <img src={"one.jpeg"} />all'interno della mia renderfunzione ma l'immagine non viene visualizzata. Inoltre, non ho accesso al webpack configfile poiché il progetto è stato creato con l' create-react-apputilità ufficiale della riga di comando.

Aggiornamento: Funziona se prima importa l'immagine import img from './one.jpeg'e la utilizzo all'interno img src={img}, ma ho così tanti file di immagini da importare e, quindi, voglio usarli nel modulo img src={'image_name.jpeg'},.

Prima di tutto avvolgi l'src {}

Quindi se si utilizza Webpack; Invece di: <img src={"./logo.jpeg"} />

Potrebbe essere necessario utilizzare richiedono:

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

Un'altra opzione sarebbe quella di importare prima l'immagine come tale:

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

o ...

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

quindi collegalo ...

<img src={logo} />

Consiglierei questa opzione soprattutto se stai riutilizzando la fonte dell'immagine.

Il modo migliore è importare prima l'immagine e poi usarla.

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

È necessario racchiudere il percorso di origine dell'immagine all'interno {}

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

È necessario utilizzare requirese si utilizzawebpack

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

All'interno della cartella pubblica creare una cartella delle risorse e posizionare il percorso dell'immagine di conseguenza.

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

il modo migliore per importare l'immagine è ...

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

Hai due modi per farlo.

Primo

Importa l'immagine in cima alla classe e poi fai riferimento nel tuo <img/>elemento in questo modo

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" /> 
  }
} 

Secondo

Puoi specificare direttamente il percorso dell'immagine usando require('../pathToImh/img')in <img/>elemento come questo

import React, { Component } from 'react'; 

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

La mia risposta è sostanzialmente molto simile a quella di Rubzen. Uso l'immagine come valore dell'oggetto, tra l'altro. Due versioni funzionano per me:

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

o

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

Senza involucri, ma anche questa è un'applicazione diversa.

Ho controllato anche la soluzione "import" e in alcuni casi funziona (ciò che non sorprende, che viene applicato nel pattern App.js in React), ma non nel caso sopra il mio.

Ho trovato un altro modo per implementarlo (questo è un componente funzionale):

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

Spero che sia d'aiuto!

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

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

L'ho usato in questo modo e funziona ... Spero ti sia 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}/>
   );
  }
}

esporta immagine predefinita

Come alcuni menzionati nei commenti, è possibile inserire le immagini nella cartella pubblica. Questo è anche spiegato nei documenti di Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/