时间戳

首页 > 解决方案 > 背景图像的相对 URL 导致语法错误

css - 背景图像的相对 URL 导致语法错误

问题描述

我有嵌入在现有网页中的角度应用程序。主页在 Tomcat 上运行，http://<host>/main并且 Angular 应用程序嵌入在以下子页面之一中：http://<host>/main/ng#/routing.

所有资源都可以在http://<host>/main/assets/

我想为其中一个容器设置背景图像，但我找不到适用于开发实例（以 开头ng serve）和分发构建（ng build）的解决方案。

  1. 这仅适用于开发实例，但在构建 CSS 后计算它http://<host>/assets/bg.jpg而不是http://<host>/main/assets/bg.jpg并且找不到图像。
.container {
    background-image: url("/../assets/bg.jpg");
}
  1. 当我使用 devtools 将背景图像更改为：
.container {
    background-image: url("assets/bg.jpg");
}

background 开始引用有效的 URL，但无法在 SCSS 中设置此值，因为它会导致 CssSyntaxError：

 Can't resolve 'assets/bg.jpg' in '<component-directory>'

以这种方式引用的图像有效，但背景图像不是：

<img src="assets/bg.jpg"/>

标签： cssangularsassangular-cli

解决方案

推荐阅读