Question

我正在创建一个解决方案，该解决方案完全使用有关背景图像的白色细节来完成。我想直接在app.component中设置图像，因此您不必再次调用它。我这样做是这样的：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { initFirebase } from './shared/firebase.common';

@Component({
  moduleId: module.id,
  selector: 'ns-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {}

app.component.scss

.fullscreen {
  background-image: url('~/images/bg-circles.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

app.component.html

<ScrollView class="fullscreen">
  <page-router-outlet></page-router-outlet>
</ScrollView>

和我的解决方案结构

src
 |- app
     |- app.component.ts
     |- app.component.html
     |- app.component.scss
     |- app.module.ts
     |- // and more files...
 |- images
     |- bg-circles.png

我已经尝试将images文件夹放在文件夹app内，已经尝试使用带有点的路径直接引用（例如../images/bg-circles.png），但是仍然没有成功。

有人可以帮我吗？给我一个例子（可行）或类似的东西吗？

Answer 1

您需要将图像放入资产文件夹或将图像文件夹添加到angular.json文件中的资产阵列中。然后，您将在CSS中使用绝对路径引用该图像。

如果将图像文件夹移动到资产文件夹（我的建议），它将看起来像这样：

.fullscreen {
  background-image: url('/assets/images/bg-circles.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

将图像设置为整个应用程序的默认背景

1 个答案: