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

【问题标题】：images is not rendered in the browser(Reactjs)图像未在浏览器中呈现（Reactjs）
【发布时间】：2022-01-11 20:17:26
【问题描述】：

我正在尝试在我的导航组件和登录页面中加载本地图像。

这就是我到目前为止所做的：

const LandingScreen = ()=>{

    return(
        <div>
           <img src ={'../Images/auction.jpg' } style={{width:100, height:100}} />
        </div>
    )

};

export default LandingScreen;

这是我的 App 组件：

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;

这是我在浏览器中得到的结果： How the image appear in the browser

【问题讨论】：

也许在问题中显示呈现的 HTML，而不是许多人永远不会在这里查看/访问的图片。

标签： javascript reactjs

【解决方案1】：

根据 CRA 文档，您应该先导入图像，然后在您的 img 标签中使用它

https://create-react-app.dev/docs/adding-images-fonts-and-files/

【讨论】：