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

0

212
Views
¿La imagen de fondo no funciona cuando se usa el método url ()?

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; `;
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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; `;
almost 3 years ago · Juan Pablo Isaza 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