React导入图片在CSS中无法正常工作。

Question

我在导入CSS图片时遇到了问题。我已经将该图片作为测试导入并且在使用img标签的src={furnitureBG}属性时工作正常。

我按照文档所述导入了该图片，然后使用路径作为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');
`

- Hunter Scott Lacefield

Answer 1

您可以使用 url(${furnitureBG?.src}) 来在 styled component 中渲染图片。

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

- Gilbish Kosma

---

我完全不知道那是一个选项！谢谢你！我使用了 url(${furnitureBG})，现在它可以渲染了。 - Hunter Scott Lacefield

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

- Minseo Lee