Mon image de fond ne fonctionnait pas car l'URL contenait un espace et j'avais donc besoin de l'encoder par URL.
Vous pouvez vérifier si c'est le problème que vous rencontrez en essayant une URL d'image différente qui ne contient pas de caractères à échapper.
Vous pouvez faire cela pour les données du composant en utilisant simplement les Javascripts intégrés à la méthode encodeURI () .
Personnellement, je voulais créer un tuyau pour cela afin qu'il puisse être utilisé dans le modèle.
Pour ce faire, vous pouvez créer un tuyau très simple. Par exemple:
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>