0

Tengo una web hecha con React Vite y al hacer npm run build y subir todos los archivos ya compilados a la web las imágenes no se ven.

Las imagenes las tengo en la carpeta public/img, no están dentro de la carpeta src.

El favicon si que se ve. Estas son las dos maneras que importo una imagen:

<img className="work" src="public/img/wk02.jpg" alt="Work" />

y

#sample {
  background-position: center;
  background-image: url("/public/img/c04.jpg");
  filter: grayscale(100);}

Por si es de información, la versión de vite es la 4.0.0 y de react 18.0.0

¿Cómo lo puedo solucionar?

Muchas gracias

9
  • como estás importando las imágenes en tu código, sin ese detalle no podemos ayudarte Commented el 8 jul. a las 14:07
  • Cierto! He añadido dos ejemplo, gracias!
    – Halley
    Commented el 8 jul. a las 14:22
  • Cuando lo arma vite, la carpeta public desaparece porque vite ya sabe que esa carpeta va como esta.. no deberias sacarla de las rutas?
    – gbianchi
    Commented el 8 jul. a las 15:12
  • @gbianchi Así?: <img className="work" src="img/wk02.jpg" alt="Work" /> Pero como las podría visualizar entonces cuando estoy creando la web?
    – Halley
    Commented el 8 jul. a las 16:03
  • Cuando estas creando tambien pasaste por vite para levantar el servidor no? entonces deberian verse tambien...
    – gbianchi
    Commented el 8 jul. a las 16:18

1 respuesta 1

0

Solución:

Importar la imagen de esta manera:

<img className="work" src="/img/wk02.jpg" alt="Work" />

Falla la imagen importada con CSS, poniendo también así :

#sample {
  background-position: center;
  background-image: url("/img/c04.jpg");
  filter: grayscale(100);}

De esta manera todavía no encontraba la imagen.

Para solucionarlo he tenido que crear una carpeta dentro de assets/public/img. Las otras imágenes están en la carpeta img, pero esta no entiendo porqué tiene que estar en esta ruta.

2
  • Hola Halley, esta es la zona de respuestas, te sugiero que elimines tu comentario, y lo agregues en la pregunta, que es donde se necesita. Commented el 9 jul. a las 3:17
  • @marcePuente ya lo hice y lo eliminaro :/
    – Halley
    Commented el 9 jul. a las 7:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.