如何在 scss 文件中为 react-static build 中的图像设置 url

Question

我正在将我的 React 站点迁移到 react-static。我在 scss 文件中有一个 css，我在我的项目中使用 react-static-plugin-sass。如何为我的 scss 文件中的图像正确设置 URL？

我试过这个：

.my-page {
  color: rgb(70, 81, 116);
  &_header {
    border: 1px solid #000;
    background-image: url(/assets/images/bg-illustration.jpg);
  }
}

但是当我 运行 网站时，它给我以下错误：

Cannot GET /assets/images/bg-illustration.jpg

我的资源位于 src 文件夹中：

-src
--assets
---images
----bg-illustration.jpg

似乎所有在 scss 文件中提到的图像都没有复制到带有资产的结果文件夹中。

如果能提供有关如何在 react-static 构建中修复它的任何信息，我将不胜感激。

Answer 1

正如 Eusbolh 在 中提到的，您需要为 URL 使用 relative 路径。例如：

background-image: url(../../assets/images/test.png);

请注意，当我们以 / 开始路径时，例如/foo/bar.png，它尝试从 public 目录读取图像。