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

问题描述

我正在将我的 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 构建中修复它的任何信息。

解决方法

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

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

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