公共>圖片>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>
</>
)
};
這就是我撰寫代碼的方式。但是圖片不行。 截圖（編譯失敗）
影像不顯示，如何顯示影像？請幫我。
uj5u.com熱心網友回復：
您不應將影像保存在公共檔案夾中。在 src 檔案夾中使用 css 時，您應該使用影像檔案的相對路徑，并且在構建程序中，react 管理和更新公共構建的路徑。
源代碼：https : //github.com/facebook/create-react-app/issues/1248#issuecomment-266313612
如果您想將您的圖片保留在公開范圍內，您可以嘗試使用 '../../../../Public/images/img-2.jpg' 作為路徑，盡管建議將您的圖片保留在里面src 并讓 react 在編譯期間管理它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/376471.html
標籤：javascript css 反应 图片 背景
上一篇：圖片上的媒體查詢
下一篇：如何在laravel8中的storage/app/public/student_img檔案夾中在我的視圖刀片中顯示影像