React 导入图像不适用于 CSS答案

【问题标题】：React importing image does not work for CSSReact 导入图像不适用于 CSS
【发布时间】：2021-12-16 18:05:25
【问题描述】：

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

【问题讨论】：

标签： css reactjs styled-components

【解决方案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});
   `

【讨论】：

我不知道这是一个选项！谢谢！我使用了 url(${furnitureBG}) 现在正在渲染。

【解决方案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

【讨论】：