¿Cómo hago referencia a una imagen local en React?

¿Cómo puedo cargar la imagen del directorio local e incluirla en la reactjs img srcetiqueta?

Tengo una imagen llamada one.jpegdentro de la misma carpeta que mi componente y probé ambas <img src="one.jpeg" />y <img src={"one.jpeg"} />dentro de mi renderfunción, pero la imagen no aparece. Además, no tengo acceso al webpack configarchivo ya que el proyecto se creó con la create-react-applínea de comando oficial util.

Actualización: esto funciona si primero importo la imagen import img from './one.jpeg'y la uso dentro img src={img}, pero tengo tantos archivos de imagen para importar y, por lo tanto, quiero usarlos en el formulario img src={'image_name.jpeg'},.

En primer lugar, envuelva el src en {}

Entonces, si usa Webpack; En vez de: <img src={"./logo.jpeg"} />

Es posible que deba usar requieren:

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

Otra opción sería importar primero la imagen como tal:

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

o ...

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

luego enchufarlo ...

<img src={logo} />

Recomiendo esta opción especialmente si está reutilizando la fuente de la imagen.

La mejor manera es importar la imagen primero y luego 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>
    );
  }
} 

Necesita envolver su ruta de origen de imagen dentro {}

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

Debe usar requiresi usawebpack

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

Dentro de la carpeta pública, cree una carpeta de activos y coloque la ruta de la imagen en consecuencia.

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

la mejor manera de importar imágenes es ...

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

Mi respuesta es básicamente muy similar a la de Rubzen. Yo uso la imagen como el valor del objeto, por cierto. Dos versiones me funcionan:

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

o

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

Sin envoltorios, pero esa es una aplicación diferente también.

También he comprobado la solución de "importación" y en algunos casos funciona (lo que no es sorprendente, se aplica en el patrón App.js en React), pero no en el caso anterior.

Tienes dos formas de hacerlo.

primero

Importe la imagen en la parte superior de la clase y luego haga referencia a ella en su <img/>elemento como este

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

Segundo

Puede especificar directamente la ruta de la imagen utilizando require('../pathToImh/img')en el <img/>elemento como éste

import React, { Component } from 'react'; 

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

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

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

Lo he usado de esta manera, y funciona ... Espero que sea útil.

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

exportar imagen predeterminada

Como algunos mencionaron en los comentarios, puede colocar las imágenes en la carpeta pública. Esto también se explica en los documentos de Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/

Encontré otra forma de implementar esto (este es un componente funcional):

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

¡Espero eso ayude!