Public>images>img-2.jpg

src>components>pages>Services.js>

      import React from 'react';       
      import '../../App.css';

      export default function Services() {
       return <h1 className='services'>SERVICES</h1>;
      }

src>>App.css>

      .services {
       background-image: url('/images/img-2.jpg');
      }

src>App.js>

      import React from "react";
      import './App.css';
      import Navbar from "./components/Navbar";
      import {Routes, Route} from 'react-router-dom';
      import Services from './components/pages/Services';

      function App(){
       return(
             <>
              <Navbar />
               <Routes>
                <Route path='/services' element={<Services />} />
               </Routes>
             </>
            )
      };

This is how I wrote the code. But the picture not working. Screenshot(Failed to compile)

Images are not displayed, how can I display images? Please help me.