使用 url() 方法时背景图像不起作用？

Question

im trying to put image in the background by using background-img:url(imageLing) but not working and it's return to me when inspect the element background-image: url(assets/backgrounds/5.jpg);what is the issue: this is my code

//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;
`;

Answer 1

React generally bundles your project before deployment which minifies images and changes image path. Hence, passing the path via props will not work. In order to get images to load properly, you have to reference them dynamically as an import.

Login Page

//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>

CSS File Option 1 (using img from 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;
`;

CSS File Option 2 (importing image in this file itself)

//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;
`;

Answer 2

as you can see here doesn't read the image.