图像未在浏览器中呈现（Reactjs）

Question

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

Answer 1

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/