Angular:将 base-href 与 scss url 结合使用

Question

我正在尝试将我的 Angular 应用程序部署到具有子域的服务器:website.com/magazine/。 所以为此我正在运行 angular-cli 命令

ng build --prod --base-href=/magazine/

我的图像在 src/assets/images 文件夹中。 当我这样做时:

background-image:url('./assets/images/.....')

我在 scss 中通过 background-image 引用的图像没有显示，因为他试图从 website.com/assets/.... 中获取图像，忽略子域。

当我这样做时(比如在 sr/app/components/component/component.scss 中):

background-image: url('../../../assets/images/...')

它有效，但图像存储在 dist 文件夹的根目录中，这是我不想要的。

当我这样做时:

background-image:url('~/assets/images/...');

或者这个

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

我得到一个错误

NonErrorEmittedError: (Emitted value instead of an instance of Error)

我想要的是我可以引用图像并保持我的相关图像路径完整。我该如何实现？

我正在使用 Angular 11 和 angular cli 11.1.4

Answer 1

不幸的是，angular 团队本身并不是很有帮助 https://github.com/angular/angular-cli/issues/18043关于这个问题。考虑到这个用例的标准程度，这是令人难以置信的……

我正在使用 Angular 11。我正在使用 filter 规则，但它当然适用于 bacground-url 或任何其他使用 url('') 路径的 css 规则值(value)。

您可以按照此处所述内联样式 https://stackoverflow.com/a/66974900/7485690 ，它将仅保存到正确的文件夹/assets/filter中，并与--base-href

一起使用

  <div class="log-wrap" style="filter: url('./assets/filter/round-clip-path.svg#goo');">

您使用相对路径的解决方案也能正常工作，但它将文件复制到根文件夹中，所以现在您有一个位于 /assets/filter 和一个位于根目录 /.

.log-wrap {
  filter: url("../../../assets/filter/round-clip-path.svg#goo");
}

还有另一种解决方案，其工作方式相同但更易于编写:

.log-wrap {
  filter: url("src/assets/filter/round-clip-path.svg#goo");
}

在试验部署时，不要忘记在开发人员控制台中禁用缓存。