2

Estoy trabajando en una web app de react y estoy utilizando vite para manejarla.

El problema es que al momento de compilar para producción no toma en cuenta las imágenes que utilizo en ningún componente, solo son visibles algunas imágenes que aplico como fondos desde la hoja de estilos SCSS.

Utilicé los comandos de npm run build y npm run preview y así es como no puedo visualizar las imágenes, si corro el proyecto en modo de desarrollo con npm run dev todo bien.

a continuacion un componente donde llamos algunas imagenes para que vean como las llamo:

    export const StartPage = () => {
    return(
        <div className="startPage">
            <img className="welcomeLogo" src="../src/img/LozanoTechIsotipoBlue.png"/>
            <h1>Hola!</h1>
            <p>
                Somos un proyecto pequeño dedicado a llevar a cabo reparaciones
                accesibles y de calidad en equipos de escritorio y laptops para
                hogares, pequeñas empresas y estudiantes.
            </p>

            <div className="StartInfoContainer">
                <img className="roundImage" src="./src/img/ref1.png"/>
                <div className="left">
                    <h1>Tu tiempo vale oro</h1>
                    <p>
                        Nos enfocamos en ofrecerte toda la calidad de nuestro servicio
                        siempre en tiempo record ya que sabemos que necesitas tu equipo
                        para continuar con tu trabajo o simplemente quieres disfrutar
                        de el y estamos concientes de ello.
                    </p>
                </div>
            </div>

            <div className="StartInfoContainer">
                <div className="right">
                    <h1>Todo a medida</h1>
                    <p>
                        Somos especialistas en realizar mejoras y ensamblajes
                        de acuerdo a tus necesidades para que no gastes de mas
                        ni obtengas un bajo rendimiento.
                    </p>
                </div>
                <img src="./src/img/ref2.png"/>
            </div>

            <div className="StartInfoContainer">
                <img className="roundImage" src="./src/img/ref3.jpg"/>
                <div className="left">
                    <h1>Mas que solo reparaciones</h1>
                    <p>
                        Contamos con muchos mas servicios que solo reparaciones o
                        mantenimiento preventivo, tenemos una amplia variedad de
                        servicios. Para conocer mas presiona <span>aqui</span>
                    </p>
                </div>
            </div>
        </div>
    )
}

y el archivo vite.config.js es el predeterminado:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

¿Alguna idea de cuál pueda ser el problema?

2
  • tendrás un poco mas de contexto? cómo estas llamando a las imágenes y como esta la configuración en el archivo vite.config del proyecto? Commented el 22 dic. 2023 a las 15:16
  • en el codigo que proporcionaste, veo que estas utilizando accesos a la misma ruta diferentes, uno es "./src/img/ref2.png" y otro "../src/img/LozanoTechIsotipoBlue.png" probaste que no fuera eso? Commented el 22 dic. 2023 a las 15:19

2 respuestas 2

1

una posible solución como lo especifica la documentación: https://vitejs.dev/guide/assets hacer el import del asset directamente(verificando que las rutas de las imágenes están correctas) y ponerlo en el atributo src de tu <img/> de esta forma:


import logoImg from "../src/img/LozanoTechIsotipoBlue.png"
import refImg from "./src/img/ref2.png"

export const StartPage = () => {
    return(
        <div className="startPage">
            <img className="welcomeLogo" src={logoImg}/>
            <h1>Hola!</h1>
            <p>
                Somos un proyecto pequeño dedicado a llevar a cabo reparaciones
                accesibles y de calidad en equipos de escritorio y laptops para
                hogares, pequeñas empresas y estudiantes.
            </p>

            <div className="StartInfoContainer">
                <img className="roundImage" src="./src/img/ref1.png"/>
                <div className="left">
                    <h1>Tu tiempo vale oro</h1>
                    <p>
                        Nos enfocamos en ofrecerte toda la calidad de nuestro servicio
                        siempre en tiempo record ya que sabemos que necesitas tu equipo
                        para continuar con tu trabajo o simplemente quieres disfrutar
                        de el y estamos concientes de ello.
                    </p>
                </div>
            </div>

            <div className="StartInfoContainer">
                <div className="right">
                    <h1>Todo a medida</h1>
                    <p>
                        Somos especialistas en realizar mejoras y ensamblajes
                        de acuerdo a tus necesidades para que no gastes de mas
                        ni obtengas un bajo rendimiento.
                    </p>
                </div>
                <img src={refImg}/>
            </div>

            <div className="StartInfoContainer">
                <img className="roundImage" src="./src/img/ref3.jpg"/>
                <div className="left">
                    <h1>Mas que solo reparaciones</h1>
                    <p>
                        Contamos con muchos mas servicios que solo reparaciones o
                        mantenimiento preventivo, tenemos una amplia variedad de
                        servicios. Para conocer mas presiona <span>aqui</span>
                    </p>
                </div>
            </div>
        </div>
    )
}
2
  • Sugiero mover esta respuesta a un comentario en la sección Añade comentario de la pregunta, puede que se vote negativo
    – g.4
    Commented el 22 dic. 2023 a las 5:20
  • hola, ya añadi un ejemplo de los llamados a las imagenes y el archivo de configuracion de vite Commented el 22 dic. 2023 a las 5:34
0

Tuve el mismo error, mueve tu directorio img/ a la ruta public/

Entonces quedaría algo así:

<img className="welcomeLogo" src="/img/LozanoTechIsotipoBlue.png"/>
<img className="roundImage" src="/img/ref1.png"/>

cuando ejecutes npm run build tu directorio img/ se moverá al directorio dist/ y las imágenes cargaran correctamente.

acá la documentacion

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.