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