如何在我的引导程序和角度布局下添加图像？

问题描述

我在我的有角项目的资产文件夹中有backgroundlogin.jpg图像，我想知道如何将其放置在我的布局下（在下图的白色部分中，箭头所在的位置）：

下面是项目的html和ccs代码：

login.component.html：

with t as (
    select 1 hour,12 min from dual 
    union all select 6 hour,26 min from dual
)
select lpad(floor(sum(hour * 60 + min) / 60),2,'0') 
    || ':'
    || lpad(mod(sum(hour * 60 + min),60),'0') total_time
from t

| TOTAL_TIME |
| :--------- |
| 07:38      |


with t as (
    select '01:12' col from dual
    union all select '06:26' from dual
)
select lpad(floor(sum(substr(col,1,2) * 60 + substr(col,-2)) / 60),'0') 
    || ':'
    || lpad(mod(sum(substr(col,-2)),'0') total_time
from t

| TOTAL_TIME |
| :--------- |
| 07:38      |

login.component.css：

  <div class="jumbotron pt-5">
     <img class="center" src="../assets/images/full-banner1.jpg">
      <form class="form-signin jumbotron">
       <h2 class="form-signin-heading">LOGIN</h2>
       <label for="inputEmail" class="sr-only">Usuário</label>
       <input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
       <label for="inputPassword" class="sr-only">Senha</label>
       <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkBox">
         <label>
         <input type="checkBox" value="remember-me">Lembrar me
         </label>
        </div>
       <button class="btn btn-lg btn-color btn-block" (click)="validateLogin();" type="button">Entrar</button>
      </form>
     </div>
    <footer class="footer navbar-default" role="contentinfo">
     <div class="container">
      <p class="absolute">
       Criado por Douglas
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <!-- Add font awesome icons -->
                <a href="#" class="fa fa-facebook"></a>
                <a href="#" class="fa fa-twitter"></a>
                <a href="#" class="fa fa-instagram "></a>
              </p>
    </div>
 </footer>

最终结果如下：

解决方法

尝试一下。

style.scss

.bck-img {
  background-image: url(./assets/images/your_image.jpg);
  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-repeat: no-repeat;
  background-size: cover;
}

login.component.ts

  ngOnInit(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('bck-img');
  }

...

  ngOnDestroy(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove('bck-img');
  }

确保像这样同时实现OnInit和OnDestroy， 导出类LoginComponent实现OnInit，OnDestroy {...}

如果您还希望去除黑色部分，请尝试此操作。

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
  background-color: transparent;
}

,

Janitha Rasanga的回答是正确的，所以我做了以下更改：

background-image: url(./assets/images/backgroundlogin.jpg);

为

background-image: url(/assets/images/backgroundlogin.jpg);