angular - 来自 CSS angular 2 的相对 URL

Question

在 Angular 2 中，我尝试使用组件的 .css 文件为分区提供背景图像，但相对路径抛出错误。

test.component.html

<div class="release-bg"></div>

test.component.css

.release-bg{
        background-image: url("../assets/images/image release green@4x.png");
    }

错误:

Failed to compile.

./src/app/components/balldetails/balldetails.component.css
(Emitted value instead of an instance of Error) CssSyntaxError: H:\Hotstar-web\hotstar-web\src\app\components\balldetails\balldetails.component.css:385:29: Can't resolve '../assets/images/image%20release%20green@4x.png' in 'H:\Hotstar-web\hotstar-web\src\app\components\balldetails'

  383 |     }
  384 |     .release-bg{
> 385 |         background-image: url("../assets/images/image release green@4x.png");
      |                                ^
  386 |     }
  387 |     

 @ ./src/app/components/balldetails/balldetails.component.ts 22:21-59
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

这不是在 Angular 2 中使用相对路径的正确方法吗？如果不是，我该如何继续让它发挥作用？

如果您需要更多信息，请告诉我。

谢谢

Answer 1

"../assets/path/to/image/image.png" 应该是 "assets/path/to/image/image.png"，因为文件夹 assets 默认在 .angular-cli.json 中作为 Assets (资源)的文件夹列出:

"assets": [
  "assets",
  "favicon.ico"
],

顺便说一句，"../assets/images/image release green@4x.png" 是否包含空格？