我在為 CSS 匯入影像時遇到問題。我已經將影像作為測驗匯入，并且在使用 src={furnitureBG} 的 img 標簽中使用它時它可以作業。
我按照檔案匯入影像，然后使用路徑作為 url('') 的值。但是，沒有影像呈現，也沒有錯誤訊息。
我知道路徑是正確的，因為當我使用代碼時
<img src={furnitureBG} />
我想要的影像呈現。我只是想知道為什么這不適用于以下 CSS 背景代碼。
import furnitureBG from '../images/furniture-bg-7.png';
const Container = styled.div`
height: 100vh;
width: 100vw;
background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('../images/furniture-bg-7.png');
`
uj5u.com熱心網友回復：
您可以使用url(${furnitureBG?.src})來使用樣式組件渲染影像。
import furnitureBG from '../images/furniture-bg-7.png';
const Container = styled.div`
height: 100vh;
width: 100vw;
background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url(${furnitureBG?.src});
`
uj5u.com熱心網友回復：
您可以將/images檔案夾移動到檔案public夾中：
應用程式.js
const Container = styled.img`
background-image: url("/images/asdf.png");
width: 100vw;
height: 100vh;
`;
function App() {
return (
<div className="App">
<Container />
</div>
);
}
目錄結構：
- project
- public
- images
- asdf.png
- src
- App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344700.html
上一篇：為什么底部文本不貼標題（css）