背景图像未在 React 中显示

Question

公共>图片>img-2.jpg

src>组件>页面>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>
             </>
            )
      };

这就是我编写代码的方式。 但是图片不工作。 截图（编译失败）

图像不显示，如何显示图像？ 请帮我。

Answer 1

您不应该将图像保存在公用文件夹中。 在 src 文件夹中使用 css 时，您应该使用映像文件的相对路径，并且在构建期间，react 管理和更新其公共构建的路径。

来源： https://github.com/facebook/create-react-app/issues/1248#issuecomment-266313612

如果你想让你的图片公开，你可以尝试使用'../../../../Public/images/img-2.jpg'作为路径，尽管建议将你的图片保留在里面src 并让 react 在编译期间管理它们。