ReactJS e imagens em pasta pública

Sou novo no ReactJS e desejo importar imagens em um componente. Essas imagens estão dentro da pasta pública e não sei como acessar a pasta do componente react.

Alguma ideia ?

EDITAR

Quero importar uma imagem dentro de Bottom.js ou Header.js

A pasta de estrutura é:

Eu não uso webpack. Eu devo ?

Editar 2

Quero usar o webpack para carregar as imagens e o resto dos ativos. Portanto, na minha pasta de configuração, tenho os próximos arquivos:

Onde preciso adicionar os caminhos das imagens e como?

obrigado

Para referenciar imagens em público, há duas maneiras de fazer isso de maneira direta. Um é como acima de Homam Bahrani.

usando

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

E como isso funciona, você realmente não precisa de mais nada, mas isso também funciona ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Você não precisa de nenhuma configuração de webpack para isso ..

Em seu componente apenas forneça o caminho da imagem. Por padrão, o react saberá seu diretório público.

<img src="/image.jpg" alt="image" />

os documentos react explicam isso muito bem na documentação, você deve usar process.env.PUBLIC_URLcom imagens colocadas na pasta pública. Veja aqui para mais informações

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- É bom se você usar o webpack para configurações, mas você pode simplesmente usar o caminho da imagem e reagir descobrirá que está no diretório público.

<img src="/image.jpg">

2- Se você quiser usar o webpack que é uma prática padrão no React. Você pode usar essas regras em seu arquivo webpack.config.dev.js.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

então você pode importar o arquivo de imagem em componentes react e usá-lo.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Você deve usar o webpack aqui para facilitar sua vida. Adicione a regra abaixo em sua configuração:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

Depois disso, você pode simplesmente importar as imagens para os componentes de reação:

import myImage from 'publicfolder/images/Image1.png'

Use myImage como abaixo:

<div><img src={myImage}/></div>

ou se a imagem é importada para o estado local do componente

<div><img src={this.state.myImage}/></div> 

Sabemos que React é SPA. Tudo é renderizado a partir do componente raiz, expandindo para o HTML apropriado do JSX.

Portanto, não importa onde você deseja usar as imagens. A prática recomendada é usar um caminho absoluto (com referência ao público). Não se preocupe com os caminhos relativos.

No seu caso, isso deve funcionar em qualquer lugar:

"./images/logofooter.png"

Você também pode usar isso .. funciona assumindo que 'yourimage.jpg' está na sua pasta pública.

<img src={'./yourimage.jpg'}/>