无法从 React 中的资源文件夹导入背景图片

Question

我正在尝试让我的 React 应用程序在 css 中渲染背景图像。我需要这个，因为我想使用 css 查询来获取不同屏幕尺寸的不同背景图像。但是，React 无法获取背景图像。

Codesandbox 链接

.Background {
  background-image: url("./blabla.jpeg"); 
  height: 300px;
  width: 600px;
}

export default function App() {

  return (
    <div className="App">
      <div className="Background">Hello</div>
    </div>
  );
}

Answer 1

如果您不想使用动态链接，您可以将图像存储在

public

文件夹中。

src

文件夹中的文件只有导入后才会被编译，而公共文件将按原样提供。

如果您使用 CRA，请遵循 this 文档。

如果您使用Vite，请按照this进行动态链接或this进行图像静态服务。