ReactJS e imágenes en carpeta pública

94

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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

Gracias

javascript reactjs Aceconhielo
fuente
1
esta carpeta es pública para qué? ¿Cuál es la estructura de su proyecto? ¿Está agrupando imágenes con el paquete web también o está excluido? etc etc etc contexto contextual
Joel Harkes
@JoelHarkes editado.
Aceconhielo
parece que no está lleno. has probado src="/images/logofooter.png":?
Joel Harkes
Lo siento, esto no es relevante para la pregunta, pero ¿qué tema de iconos usas?
Nermin

Respuestas:

77

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'} />
Gerard
fuente
1
No muestra ningún error en la consola, pero la imagen aparece como un icono de imagen predeterminado, no como lo que he importado. He probado los dos casos que ha mencionado. Por favor, ayúdame. Gracias !
Prakhar Mittal
148

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" />
Bimal Grg
fuente
2
Esto funcionó para mí. Solo copié imágenes al directorio público. React resolvió automáticamente la ruta.
Vineeth Bhaskaran
2
Y si las imágenes están en alguna carpeta dentro de la carpeta pública, ¿sabrá reaccionar para encontrarla?
Yuval Levy
2
Sí @YuvalLevy.
Oliver Voutat
10

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'} />;
Homam Bahrani
fuente
Sí, para imágenes dinámicas fuera de la jerarquía de directorios src. Los estáticos, como un logotipo o un fondo, se pueden alcanzar con el método de importación.
Juan Lanus
1
también, esto es para aplicaciones creadas con la aplicación create react
eballeste
1
No muestra ningún error en la consola, pero la imagen aparece como un icono de imagen predeterminado, no como lo que he importado. Por favor, ayúdame.
Prakhar Mittal
4

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}/>
Hassan Ajaz
fuente
2

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"

Karthik Sagar
fuente
1

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>
Umesh
fuente
Dudo que necesite un paquete web para poder hacer una importación de un recurso.
Siya
@fshock, dije que facilitaría la realización de la tarea.
Umesh
@Umesh Prefiero hacerlo con Webpack. Entonces dijiste que tengo que agregar la regla en la configuración, pero ¿qué archivo? Tengo path.js, polyfills.js, webpack.config.dev.js, webpack.config.prod.js y webpackDevServer.config.js. Voy a editar la pregunta para que todos puedan ver la estructura. Gracias
Aceconhielo
@Aceconhielo, debe incluirlo en webpack.config.dev.js y webpack.config.prod.js
Umesh
0

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

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