Arka plan resmim çalışmıyordu çünkü URL'de bir boşluk vardı ve bu yüzden onu URL olarak kodlamam gerekiyordu.
Kaçması gereken karakterlere sahip olmayan farklı bir resim URL'sini deneyerek sorunun bu olup olmadığını kontrol edebilirsiniz.
Bunu yalnızca encodeURI () yönteminde yerleşik Javascripts kullanarak bileşendeki verilere yapabilirsiniz .
Şahsen ben şablonda kullanılabilmesi için bir boru oluşturmak istedim.
Bunu yapmak için çok basit bir boru oluşturabilirsiniz. Örneğin:
src / app / borular / 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>