estoy tratando de poner la imagen en segundo plano usando background-img:url(imageLing) pero no funciona y me devuelve cuando inspecciono el elemento background-image: url(assets/backgrounds/5.jpg); cuál es el problema: este es mi código
//login page <LoginWrapper img={`assets/backgrounds/${randomImage}.jpg`}> <Wrapper> <LoginForm onClickLogin={login} /> </Wrapper> </LoginWrapper> //css file using styled- components interface LoginProps { img: string; } export const LoginWrapper = styled.div<LoginProps>` display: flex; align-items: center; justify-content: center; height: 93vh; background-image: url(${({ img }) => img}); background-size: cover; background-repeat: no-repeat; `;React generalmente empaqueta su proyecto antes de la implementación, lo que minimiza las imágenes y cambia la ruta de la imagen. Por lo tanto, pasar la ruta a través de accesorios no funcionará. Para que las imágenes se carguen correctamente, debe hacer referencia a ellas dinámicamente como una importación.
Página de inicio de sesión
//login page import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example <LoginWrapper img={img}> <Wrapper> <LoginForm onClickLogin={login} /> </Wrapper> </LoginWrapper>Archivo CSS Opción 1 (usando img de props)
//css file using styled- components // interface LoginProps { // img: string; // } export const LoginWrapper = styled.div` display: flex; align-items: center; justify-content: center; height: 93vh; background-image: url(${({ img }) => img}); background-size: cover; background-repeat: no-repeat; `;Archivo CSS Opción 2 (importación de imagen en este mismo archivo)
//css file using styled- components import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example export const LoginWrapper = styled.div` display: flex; align-items: center; justify-content: center; height: 93vh; background-image: url(${img}); background-size: cover; background-repeat: no-repeat; `;