Моє фонове зображення не працювало, оскільки в URL-адресі було пробіл, і тому мені потрібно було його кодувати.
Ви можете перевірити, чи це проблема у вас, спробувавши іншу URL-адресу зображення, яка не містить символів, які потребують втечі.
Ви можете зробити це для даних компонента просто за допомогою Javascripts, вбудованого в метод encodeURI () .
Особисто я хотів створити для нього трубу, щоб її можна було використовувати в шаблоні.
Для цього можна створити дуже просту трубу. Наприклад:
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>