背景图片未在 React 中显示

Question

Public>图片>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>
             </>
            )
      };

我就是这样写代码的。但是图片不工作。 Screenshot(Failed to compile)

图片显示不出来，如何显示图片？请帮助我。

Answer 1

您不应将图像保存在 public 文件夹中。在 src 文件夹中使用 css 时，您应该使用图像文件的相对路径，并且在构建过程中，React 管理和更新路径到他们的 public 构建一个。

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

如果你想把你的图片放在public里面，你可以尝试使用'../../../../Public/images/img-2.jpg'作为路径，虽然它是建议将图像保存在 src 中，让 React 在编译期间管理它们。

背景图片未在 React 中显示

background image not showing in React

javascript

css

background

image

reactjs