• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

1.4K
Views
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 de reacción.

Algunas ideas ?

EDITAR

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

La estructura de la carpeta es:

ingrese la descripción de la imagen aquí

No uso paquete web. Debería ?

Editar 2

Quiero usar webpack para cargar las imágenes y el resto de activos. Así que 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

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

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

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

 <img src="/image.jpg" alt="image" />
about 3 years ago · Santiago Trujillo Report

0

Para hacer referencia a imágenes en público, hay dos formas en las que sé cómo hacerlo de manera directa. Uno es como el de arriba 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'} />
about 3 years ago · Santiago Trujillo Report

0

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

 return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error