Minha imagem de plano de fundo não estava funcionando porque a URL tinha um espaço e, portanto, precisei codificá-la.
Você pode verificar se esse é o problema que está enfrentando tentando um URL de imagem diferente que não tenha caracteres que precisem de escape.
Você poderia fazer isso com os dados no componente apenas usando Javascripts integrados em encodeURI () método .
Pessoalmente, queria criar um pipe para ele para que pudesse ser usado no modelo.
Para fazer isso, você pode criar um tubo muito simples. Por exemplo:
src / app / pipes / encode-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 / 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 / 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';
}
}
src / app / app.component.html
<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>