ReactJS e imágenes en carpeta pública

Soy nuevo en ReactJS y quiero importar imágenes en un componente. Estas imágenes están dentro de la carpeta pública y no sé cómo acceder a la carpeta desde el componente react.

Algunas ideas ?

EDITAR

Quiero importar una imagen dentro de Bottom.js o Header.js

La carpeta de estructura es:

No uso webpack. Debería ?

Editar 2

Quiero usar el paquete web para cargar las imágenes y el resto de activos. Entonces en mi carpeta de configuración tengo los siguientes archivos:

¿Dónde necesito agregar las rutas de las imágenes y cómo?

Gracias

Para hacer referencia a imágenes en público, hay dos formas en las que sé cómo hacerlo directamente. Uno es como el de Homam Bahrani.

utilizando

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

Y como esto funciona, realmente no necesitas nada más, pero esto también funciona ...

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

No necesita ninguna configuración de paquete web para esto ...

En su componente, simplemente proporcione la ruta de la imagen. Por defecto, reaccionar sabrá que está en el directorio público.

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

los documentos de reacción explican esto muy bien en la documentación, debe usar process.env.PUBLIC_URLcon imágenes colocadas en la carpeta pública. Vea aquí para más información

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

1- Es bueno si usa webpack para configuraciones, pero simplemente puede usar la ruta de la imagen y reaccionar descubrirá que está en el directorio público.

<img src="/image.jpg">

2- Si desea utilizar el paquete web, que es una práctica estándar en React. Puede utilizar estas reglas en su archivo webpack.config.dev.js.

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

luego puede importar el archivo de imagen en los componentes de reacción y usarlo.

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

<img src={image}/>

Sabemos que React es SPA. Todo se procesa desde el componente raíz expandiéndolo al HTML apropiado desde JSX.

Por lo tanto, no importa dónde desee utilizar las imágenes. La mejor práctica es utilizar una ruta absoluta (con referencia a público). No se preocupe por las rutas relativas.

En su caso, esto debería funcionar en todas partes:

"./images/logofooter.png"

Debería usar webpack aquí para hacer su vida más fácil. Agregue la siguiente regla en su configuración:

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]'
        }
      }

Después de esto, puede simplemente importar las imágenes en sus componentes de reacción:

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

Utilice myImage como a continuación:

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

o si la imagen se importa al estado local del componente

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

También puede usar esto ... funciona asumiendo que 'yourimage.jpg' está en su carpeta pública.

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