Hình nền của tôi không hoạt động vì URL có một khoảng trống trong đó và do đó tôi cần phải mã hóa URL.
Bạn có thể kiểm tra xem đây có phải là vấn đề bạn đang gặp phải hay không bằng cách thử một URL hình ảnh khác không có các ký tự cần thoát.
Bạn có thể thực hiện việc này với dữ liệu trong thành phần chỉ bằng cách sử dụng Javascripts được tích hợp trong encodeURI () phương thức .
Cá nhân tôi muốn tạo một đường ống cho nó để nó có thể được sử dụng trong mẫu.
Để làm điều này, bạn có thể tạo một đường ống rất đơn giản. Ví dụ:
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>