Mi imagen de fondo no funcionaba porque la URL tenía un espacio y, por lo tanto, necesitaba codificarla.
Puede verificar si este es el problema que tiene probando una URL de imagen diferente que no tenga caracteres que deban escapar.
Puede hacer esto con los datos en el componente simplemente usando Javascripts integrados en encodeURI () método .
Personalmente, quería crear una tubería para que pudiera usarse en la plantilla.
Para hacer esto, puede crear una tubería muy simple. Por ejemplo:
src / app / pipe / 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>