I am trying to load a local image in my Nav component and in the landing page.
So this is what I've done so far:
const LandingScreen = ()=>{
return(
<div>
<img src ={'../Images/auction.jpg' } style={{width:100, height:100}} />
</div>
)
};
export default LandingScreen;and this is my App component:
import './App.css';
import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import './bootstrap.css';
import Register from './Screens/RegisterScreen/Register';
import Login from './Screens/LoginScreen/Login';
import {Route, BrowserRouter as Router, Routes} from 'react-router-dom';
import LandingScreen from './Screens/LandingScreen';
const App = ()=> {
return (
<Router>
<Header/>
<Routes className ="front">
<Route path="/" element={<LandingScreen/>} exact/>
<Route path ="/register" element ={<Register/>}/>
<Route path ="/login" element ={<Login/>}/>
</Routes>
<Footer/>
</Router>
);
}
export default App;And this is the result that I am getting in the browser: How the image appear in the browser
according to CRA documentation you should import you image first, then use it in your img tag
https://create-react-app.dev/docs/adding-images-fonts-and-files/
