Question

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

test.component.html

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

test.component.css

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

错误：

div

这不是在角度2中使用相对路径的正确方法吗？如果没有，我该怎样才能让它发挥作用？

如果您需要更多信息，请与我们联系。

由于

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 +')';

Answer 2

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

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

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

Answer 3

代码应该是这样的

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

来自CSS angular 2的相对URL

3 个答案: