This is the Home Component. I am passing the Details as props to Main component

import React from 'react'
import Main from '../components/Main'
import Navbar from '../components/Navbar'

const Home = () => {
  return (
    <div>
        <Navbar/>
        <Main
        title = "Model Y"
        text = "Schedule a Demo Drive"
        bgImg = "../assets/model-x.jpg"
        leftBtnText = "Custom Order"
        rightBtnText = "View Inventory"
         />
         
    </div>
  )
}

export default Home

This is the main components

import React from 'react';
import styled from 'styled-components';
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';


const Container = styled.div`
   height: 100vh;
   width: 100%;
   /* background-image: url('../assets/model-y.jpg'); */
   background-image: ${props => `url(${props.bgImage})`};
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   gap:15rem;
`;

const Heading = styled.div`
   flex:3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

const Title = styled.h1`
   font-size: 2.7rem;
   font-weight: 700;
   color:#202328;
`;

const Text = styled.p`
   font-weight:500;
   font-size: 1rem;
   letter-spacing: 0.4px;
   cursor: pointer;
   color:#202328;
`;

const Line = styled.span`
  height: 1.1px;
  background-color: black;
  width: 100%;

`;

const Buttons = styled.div`
   display: flex;
   align-items: center;
   gap: 2rem;
`;

const Bottom = styled.div`
   flex:1;
   display:flex;
   flex-direction: column;
   align-items: center;
   gap:2rem;
`;

const ButtonLeft = styled.button`
    padding: 0.6rem 6rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 1rem;
    font-weight: 900;
    background-color: rgba(23,26,32,0.8);
    color: white;
    opacity:0.80;
    cursor: pointer;
`;

const ButtonRight = styled(ButtonLeft)`
   background-color: white;
   color: #202328;
   opacity:0.70;
`;

const DownArrow = styled.div`
   animation:bounce infinite 1s;
   color:white;
   cursor:pointer;
`;

const Main = (props) => {
  return (
    <Container bgImage={props.bgImg}>
    <Heading>
        <Title>{props.title}</Title>
        <Text>
         {props.text}
        </Text>
        <Line/>
    </Heading>
    <Bottom>
        <Buttons>
            <ButtonLeft>{props.leftBtnText}</ButtonLeft>
            <ButtonRight>{props.rightBtnText}</ButtonRight>
        </Buttons>
        <DownArrow>
            <KeyboardArrowDownOutlinedIcon fontSize='large'/>
        </DownArrow>
    </Bottom>
    </Container>
  )
}

export default Main

The file structure (for Images path)

enter image description here

I want the background Image I am passing as props to be visible.

After using the above code it looks like this

enter image description here

As you can see the Image is not visible behind but in inspect you can clearly see the correct url for image is there.

Please Help.

CodePudding user response：

You should import the background image.

import bg from '../assets/model-x.jpg';

and pass the imported bg to the bgImg props. like this:

import React from 'react'
import Main from '../components/Main'
import Navbar from '../components/Navbar'
import bg from '../assets/model-x.jpg';

const Home = () => {
  return (
    <div>
        <Navbar/>
        <Main
        title="Model Y"
        text="Schedule a Demo Drive"
        bgImg={bg} 
        leftBtnText = "Custom Order"
        rightBtnText = "View Inventory"
         />
         
    </div>
  )
}

export default Home