如何在 scss 文件中的 react-static 构建中设置图像的 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);
  }
}

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

无法获取 /assets/images/bg-illustration.jpg

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

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

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

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

Answer 1

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

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

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