React 导入图像不适用于 CSS

Question

我在为 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');
`

Answer 1

您可以使用 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});
   `

Answer 2

您可以将 /images 文件夹移动到 public 文件夹中：

App.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

React 导入图像不适用于 CSS

React importing image does not work for CSS

css

reactjs

styled-components