CSS中的相对URL在Angular 2中如何处理？

Question

CSS中的相对URL在Angular 2中如何处理？

3

在 Angular 2 中，我试图使用组件的 .css 文件为一个 division 提供背景图片，但是相对路径会导致错误。 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中使用相对路径的正确方法吗？如果不是，我该如何进行以使其正常工作？

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

谢谢。

- Akki619

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VivekG · Answer 1

你可以在组件文件中提供URL路径，并使用以下属性将其用于HTML：

[style.background-image]="variableName/ your Component Class variable name here"

在 Component.ts 文件中，像下面这样声明您的变量：

variableName:any = 'url('+ your image folder relative path name +')';

- pzaenger · Answer 2

"../assets/path/to/image/image.png" 应该改为 "assets/path/to/image/image.png"，因为在 .angular-cli.json 文件中默认将文件夹 assets 列为资源的文件夹：

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

顺便问一下，"../assets/images/image release green@4x.png" 中有空格吗？

- Pardeep Jain · Answer 3

代码应该像这样

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