Attribute property binding for background-image url in Angular 2

css angular typescript angular-directive

I think that you should use something like that:

<div class="profile-image"     [ngStyle]="{ 'background-image': 'url(' + image + ')'}">

where image is a property of your component.

See this question:

css angular typescript angular-directive

You don't need to use NgStyle. You can also do this:

[style.background-image]="'url(' + image + ')'"

css angular typescript angular-directive

The main reason is simple, you declared a global variable as blankImage but in the template you called image instead of blankImage.

Your ts code variable blankImage

blankImage: string = '../assets/.../camera.png';

Your template code variable image

<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>

CodeHunter