Как установить угловое 4 фонового изображения?

Я пытаюсь использовать следующие строки, чтобы установить фоновое изображение. Но это не работает. Каким образом можно установить фоновое изображение в моем приложении.

app.component.html

<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
    <router-outlet></router-outlet>
    <alert></alert>
</div>

ОТВЕТЫ

Ответ 1

Вы можете использовать ngStyle чтобы установить фон для div

<div [ngStyle]="{background: 'url(./images/' + trls.img + ')'}"></div>

или вы также можете использовать встроенный фоновый стиль:

<div [style.background]="'url(/images/' + trls.img + ')'"></div>

Ответ 2

Это работает для меня:

поместите это в свою разметку:

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

затем в компоненте:

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}

Ответ 3

Ниже ответ работал с угловым 4/5.

В app.component.css

.image{
     height:40em; background-size:cover; width:auto;
     background-image:url('copied image address');
     background-position:50% 50%;
   }

Также в app.component.html просто добавьте, как показано ниже.

<div class="image">
Your content
</div>

Таким образом, мне удалось установить фоновое изображение в Angular 4/5.

Ответ 4

этот работает для меня и для Internet Explorer:

<div class="col imagebox" [ngStyle]="bkUrl"></div>

...

@Input() background = '571x450img';  
bkUrl = {};   
ngOnInit() {
    this.bkUrl = this.getBkUrl();
  }
getBkUrl() {
    const styles = {
      'background-image': 'url(src/assets/images/' + this.background + '.jpg)'
    };
    console.log(styles);
    return styles;
  }

Ответ 5

Я хотел изображение профиля размером 96x96 с данными из API. Следующее решение у меня сработало в проекте Angular 7.

.ts:

  @Input() profile;

.html:

 <span class="avatar" [ngStyle]="{'background-image': 'url('+ profile?.public_picture +')'}"></span>

.scss:

 .avatar {
      border-radius: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      width: 96px;
      height: 96px;
    }

Обратите внимание, что если вы пишете background вместо 'background-image' в [ngStyle], стили, которые вы пишете (даже в style элемента) для других свойств фона, таких как background-position/size и т.д., Не будут работать. Потому что вы уже исправите его свойства с помощью background: 'url(+ property +) (no providers for size, position, etc. !)'. [ngStyle] выше style элемента. В background здесь будет работать только свойство url(). Обязательно используйте 'background-image' вместо 'background' на случай, если вы хотите написать больше свойств для фонового изображения.

Ответ 6

Мое фоновое изображение не работало, потому что в URL был пробел, и поэтому мне нужно было его кодировать.

Вы можете проверить, является ли это вашей проблемой, попробовав другой URL-адрес изображения, в котором нет символов, которые нужно экранировать.

Вы можете сделать это с данными в компоненте, просто используя Javascripts, встроенный в метод encodeURI().

Лично я хотел создать для него канал, чтобы его можно было использовать в шаблоне.

Для этого вы можете создать очень простую трубу. Например:

ЦСИ/приложение/трубы/закодировать-uri.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);
  }
}

SRC/приложение /app.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

SRC/приложение /app.component.ts

import {Component} from '@angular/core';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space init.com';
  }
}

ЦСИ/приложение /app.component.html

<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>