La mia immagine di sfondo non funzionava perché l'URL aveva uno spazio e quindi avevo bisogno di codificarlo nell'URL.
Puoi verificare se questo è il problema che stai riscontrando provando un URL immagine diverso che non abbia caratteri che necessitano di escape.
È possibile eseguire questa operazione sui dati nel componente semplicemente utilizzando JavaScript incorporati nel metodo encodeURI () .
Personalmente ho voluto creare un tubo per esso in modo che potesse essere utilizzato nel modello.
Per fare questo puoi creare una pipa molto semplice. Per esempio:
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>