background image (svg) is not loading in ReactJS project-CodePudding

I am making a project in ReactJS. And I am using inline CSS to set background image to my main element which is svg. But this is not loading in the live preview. I have tried many ways available on the internet but still this is not working.

function Questionnaire(props){

     const styles = {
                backgroundImage : "url(/images/background.svg)",
                backgroundPosition: "center center",
                backgroundSize: "cover"
              }

     return(
            <main style={styles}>
            </main>
       
           )
}

If I'm moving my images folder to src folder, then it is showing me this errorError shown in React project.

CodePudding user response：

you need to import the image above, then you can add in the background image url, as you can see the below code.

import BackgroundImage from '/images/background.svg';

function Questionnaire(props){

 const styles = {
            backgroundImage : `url(${BackgroundImage})`,
            backgroundPosition: "center center",
            backgroundSize: "cover"
          }

 return(
        <main style={styles}>
        </main>
   
       )
}

CodePudding user response：

your path is not correct and make sure you enter the Right file name