Attribute property binding for background-image url in Angular 2
Solution 1
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:
Solution 2
You don't need to use NgStyle
. You can also do this:
[style.background-image]="'url(' + image + ')'"
See more at How to add background-image using ngStyle (angular2)?
Solution 3
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>
Related videos on Youtube
Comments
-
0xPingo over 2 years
I have been struggling to figure out the best way to dynamically change the
background-image
attribute in a number of Angular 2 components.In the following example, I am attempting to set the
background-image
of a div to an@Input
value using[ngStyle]
directive:import {Component, Input} from '@angular/core'; import { User } from '../models'; // exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app) export type UserInput = User; @Component({ selector: 'profile-sidenav', styles: [ ` .profile-image { background-repeat: no-repeat; background-position: 50%; border-radius: 50%; width: 100px; height: 100px; } `], template: ` <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})"> <h3>{{ username }}</h3> ` }) export class ProfileSidenav { @Input() user: UserInput; blankImage: string = '../assets/.../camera.png'; // utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app) get username() { return this.user.username; } get image() { if (!this.user.image) { return this.cameraImage; } else { return this.user.image; } }
I don't think the issue is with the observable, since
username
displays and doing something like<img *ngIf="image" src="{{ image }}">
renders the image. I have to access thebackground-image
attribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.EDIT:
My original
[ngStyle]
declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags aroundurl()
andimage
. The correct way is (as answered below) is:<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.
As stated in the original edit, a solution can also be achieved with the Renderer class in Angular 2. I have yet to do it but think there should be a way with
setElementStyles
or something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being. -
0xPingo about 8 yearsThanks for the response! I tried your suggestion (with an extra curly bracket at the end, and the image didn't render :/. Also tried this and had no luck:
<div class="profile-image" [ngStyle]="{ 'background-image': 'url(' + {{image}} + ')'}">
-
0xPingo about 8 yearsDoes it have to do with how I have
image
defined? Your example (plus the extra curly bracket) does not cause any errors, but the image still does not render :/. I tried puttingblankImage
in there as well (defined locally instead of through an observable), but had the same result. @Thierry -
Thierry Templier about 8 yearsYou're welcome! Is the
background-image
style applied to your element? You can see this within the Elements tab of Dev tools... -
0xPingo about 8 yearsNo, the style is not getting applied @Thierry Templier
-
0xPingo about 8 years(But is applied when I defined it in the .profile-image css up top)
-
0xPingo about 8 yearsNvm, got it to work. The
blankImage
I was referencing had some blank spaces in the path, so that was causing the issue. -
0xPingo about 8 yearstried editing your response to add the extra curly bracket but it wasn't 6 characters (minimum required). Please edit so I can accept! Thanks !
-
Günter Zöchbauer about 8 years
-
moreirapontocom about 5 yearsAwesome! Really simple way. Thanks.
-
redfox05 about 5 years@moreirapontocom glad it helps, even 3 years on from when I wrote that :D
-
Joseph Jojo John almost 4 yearsthe RHS part already contains an expression, and you are adding another expression {{image}} into that. This will trigger an error.
-
ammad khan over 2 yearsgreat! looking for this.