[Angel Sánchez]

@martinmelo97

[Ivan Montesinos]

Tal vez podrías poner la imagen en tu carpeta “public” para poder usar la variable “process.env.PUBLIC_URL”.

[Martín Melo Godínez]

¡Hola Arauz! Disculpa la tardanza, pero con mucho gusto resuelvo tu duda.

Para poder utilizar una imagen dentro de un componente de React, es necesario que la importes como si fuera un componente u otro archivo .jsx, de la siguiente manera

import Name from ‘./auto.jpg’;

Donde Name es un nombre con el cual tú vas a identificar esta imagen, podemos pensar en que la imagen será un componente. Considerando el nombre de tu imagen podría ser:

import autoImg from ‘./auto.jpg’;

Después del from es necesario que coloques el path de donde se encuentra tu imagen, en este caso, como la imagen se encuentra dentro de la misma carpeta colocamos el ./ para indicar que de esta misma carpeta va a utilizar la imagen cuyo nombre es auto.jpg.

Una vez que tienes importada tu imagen, la manera en como la utilizarías sería:

< img src={autoImg} alt=”image” />

Es decir, en el atributo src de la etiqueta img colocar la imagen que importaste, con el nombre que le asignaste al momento de importarla. Con esto sería más que suficiente para importarla. Si tu deseas agregarle estilos, puedes agregar una clase a la etiqueta y mediante CSS estilizarla, quedando así:

< img src={autoImg} alt=”image” className=”img”/>

Por último, una buena práctica es tener una carpeta específicamente para los archivos estáticos, la cual se encuentre al mismo nivel de la carpeta de componentes. Podrías darle el nombre de static, assets o images, aunque realmente puede ser cualquier nombre, yo te doy como sugerencia los nombres más utilizados 🙂. Si deseas utilizar esta buena práctica, puedes mover la imagen dentro de esta carpeta, eliminarla dentro de tu carpeta header y cambiar la ruta de la cual estás importando la imagen, ya que ya no se encuentra en la misma carpeta.

Espero poder haberte aclarado la duda y cualquier otra duda quedo pendiente. Saludos!

[java12xx Arauz Osinaga]

gracias @martinmelo97, por la ayuda ya pude resolverlo.

otra consulta tengo un contenedor que esta dentro de otro a la cual le aplique los estilos de:

resize: horizontal;

overflow:auto;

pero cuando lo ejecuto en el navegador no funciona tendria que aplicar los estilos al contenedor padre tambien?.

Saludos

[Martín Melo Godínez]

¡Hola Java! Voy viendo este comentario, disculpa. ¿Tendrás de casualidad tu proyecto en Github? Para poder visualizar como se están comportando los estilos y ver como se podría lograr lo que buscas.