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 code was written without any errors, but the image is not displaying. Screenshot(Failed to compile)
The images are not showing up on my website. Can anyone suggest a solution for this issue? Your help would be greatly appreciated.