css - 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});
   `