Mein Hintergrundbild funktionierte nicht, da die URL ein Leerzeichen enthielt und ich sie daher per URL codieren musste.
Sie können überprüfen, ob dies das Problem ist, indem Sie eine andere Bild-URL ausprobieren, die keine Zeichen enthält, die maskiert werden müssen.
Sie können dies mit den Daten in der Komponente tun, indem Sie nur in encodeURI () integrierte Javascripts verwenden. -Methode integrierten verwenden.
Persönlich wollte ich eine Pipe dafür erstellen, damit sie in der Vorlage verwendet werden kann.
Dazu können Sie eine sehr einfache Pipe erstellen. Beispielsweise:
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>