Como faço para referenciar uma imagem local no React?

Como posso carregar uma imagem do diretório local e incluí-la na reactjs img srctag?

Eu tenho uma imagem chamada one.jpegdentro da mesma pasta do meu componente e tentei ambas <img src="one.jpeg" />e <img src={"one.jpeg"} />dentro da minha renderfunção, mas a imagem não aparece. Além disso, não tenho acesso ao webpack configarquivo, pois o projeto foi criado com o create-react-apputilitário de linha de comando oficial .

Atualização: Isso funciona se eu importar a imagem pela primeira vez import img from './one.jpeg'e usá-la dentro img src={img}, mas tenho muitos arquivos de imagem para importar e, portanto, quero usá-los no formulário img src={'image_name.jpeg'}.

Primeiro, envolva o src em {}

Então, se estiver usando o Webpack; Ao invés de: <img src={"./logo.jpeg"} />

Você pode precisar usar exigir:

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

Outra opção seria importar primeiro a imagem como tal:

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

ou ...

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

depois conecte-o ...

<img src={logo} />

Eu recomendaria esta opção, especialmente se você estiver reutilizando a fonte da imagem.

A melhor maneira é importar a imagem primeiro e depois usá-la.

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

Você precisa agrupar seu caminho de origem da imagem dentro {}

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

Você precisa usar requirese estiver usandowebpack

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

Dentro da pasta pública, crie uma pasta de ativos e coloque o caminho da imagem de acordo.

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

a melhor maneira de importar imagens é ...

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

Minha resposta é basicamente muito semelhante à de Rubzen. Eu uso a imagem como o valor do objeto, btw. Duas versões funcionam para mim:

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

ou

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

Sem invólucros - mas essa também é uma aplicação diferente.

Eu verifiquei também a solução "import" e, em alguns casos, funciona (o que não é surpreendente, aplicado no padrão App.js no React), mas não no caso como o meu acima.

Você tem duas maneiras de fazer isso.

Primeiro

Importe a imagem na parte superior da classe e faça referência a ela no seu <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

Você pode especificar diretamente o caminho da imagem usando require('../pathToImh/img')no <img/>elemento como este

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;

Eu usei dessa maneira, e funciona ... Espero que seja ú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 imagem padrão

Como alguns mencionados nos comentários, você pode colocar as imagens na pasta pública. Isso também é explicado nos documentos do Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/

Eu encontrei outra maneira de implementar isso (este é um componente funcional):

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

Espero que ajude!