Angular: How can I pass a background image URL through HTML rather than CSS?

Question

The Scenario:

I have an element in my Angular app that I want to add a background image to. At the moment I have this:

<div class={{background-class}}></div>

where background-class is, for example, "background-style-1", which is in my stylesheet like this:

background-style-1 {
  background-image: url(../../../../assets/images/contextmenu/person.png);
}

The element successfully displays the image, and if I query it, it shows this:

The Problem:

I don't want to hard-code all the background image URLs into my stylesheet. Instead, I want to just pass the URL into the HTML tag.

What I've Tried

<div style="background-image: url(../../../../assets/images/contextmenu/person.png)"></div>

This fails to display the image, and when I query the element, it shows this:

What I Want To Know:

Why does passing the image URL as an inline style property not work, and how can I make it work?

Nicolas · Accepted Answer · 2019-12-18 16:13:07Z

1

You can dynamicaly set the background image from the html using this syntax : [style.someproperty]="'somevalue'". In your case, it can look something like this.

<div [style.backgroundImage]="'url(' + url + ')'"></div>

This will take the value of url ( defined in your controller) as the url for the background image.

answered Dec 18, 2019 at 16:13

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RNdev Over a year ago

Hi Nicholas, unfortunately it's still not working. The image doesn't load, and when I hover over the element it says: background-image: url(../../../../assets/images/contextmenu/person.png); Is there any other info I can give you to help diagnose the problem?

Nicolas Over a year ago

Are you sure the image ../../../../assets/images/contextmenu/person.png exists ?

RNdev Over a year ago

Yep, double-checked ;)

Nicolas Over a year ago

I'm not sure but it might have something to do with the way Angular bundle your files. Remember that when you load your site, you are loading compiled file from the dist folder. So if your dist folder doesn't have your image is it, it is not available to the browser.

Nicolas Over a year ago

if everythings is in ~/projects/somefolders/yourapp/dist/ then ../../../../ goes back all the way to the project folder ( in this example ) @RNdev

Prashant Pimpale · Accepted Answer · 2019-12-19 05:16:13Z

1

You can use ngStyle:

HTML:

[ngStyle]="{'background-image': 'url(' + image + ')'}"

TS:

image = "assets/images/contextmenu/person.png"

edited Dec 19, 2019 at 5:16

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 18, 2019 at 16:12

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

RNdev Over a year ago

Hi Adrita, unfortunately it's still not working. The image doesn't load, and when I hover over the element it says: background-image: url(../../../../assets/images/contextmenu/person.png); Is there any other info I can give you to help diagnose the problem?

Adrita Sharma Over a year ago

Are you sure the image path is correct? Simply test it by binding image src

Passionate Coder · Accepted Answer · 2019-12-18 16:14:53Z

0

You can use ngStyle directive to bind styles dynamically on html elements

In component set your path variable

path = '../../../../assets/images/contextmenu/person.png'

use it in template like below

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

Try this

https://stackblitz.com/edit/angular-cxk5dr

Documention link for ngStyle

https://angular.io/api/common/NgStyle

answered Dec 18, 2019 at 16:14

Passionate Coder

7,3042 gold badges24 silver badges50 bronze badges

3 Comments

RNdev Over a year ago

Hi Mamta, unfortunately it's still not working. The image doesn't load, and when I hover over the element it says: background-image: url(../../../../assets/images/contextmenu/person.png); Is there any other info I can give you to help diagnose the problem?

Passionate Coder Over a year ago

can you please provide stackblitz link with some sample code of yours

RNdev Over a year ago

I don't think you can upload images to stackblitz. My code is exactly the same as yours in your stackblitz link, except that rather than using "https..." as the URL, I'm using the ref to a local file. Do you know if it's possible to upload images to stackblitz to replicate my scenario? I don't think I can.

Mr.7 · Accepted Answer · 2021-06-18 10:15:01Z

0

You can either use [ngStyle] or [style.backgroundImage] to bind dynamic styles.

and it's better to pass image/icon name to the component.

[ngStyle]="{'background-image': 'url(path/to/icons' + iconName + ')'}"

or smililarly

[style.backgroundImage]= 'url(path/to/icons' + iconName + ')'

and the iconName would be

const iconName = 'logo.svg';

PS: Ensure that logo.svg is present in the given path.

answered Jun 18, 2021 at 10:15

Mr.7

2,7311 gold badge24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular: How can I pass a background image URL through HTML rather than CSS?

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related