Angular2 included css image path

Question

When I include style into component like this:

@Component({
    styleUrls: [
         "assets/plugins/test/css/style.css"
    ],
    encapsulation: ViewEncapsulation.None
})

and when style contains references to images, for example

.sample { background-image: url(../img/bg.jpg); }

browser tries to find bg.jpg at base url (http://localhost/bg.jpg) instead of that, it should search for that image in "http://localhost/assets/plugins/test/img/".

That happens when Angular2 inserts style between style tags. Is it possible to make Angular2 insert <link rel="stylesheet" href="..."/> instead?

Update 1

Plunker: http://plnkr.co/edit/SHJzVHOyTuLu106r6tpD open browser developer console and search for "bg.jpg"

Does your page load at all when you reload with F5? See also stackoverflow.com/questions/31415052/… See also stackoverflow.com/questions/34535163/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 2, 2016 at 9:59
I still think my provides links provide the solution. Use a server that supports pushState or change to HashLocationStrategy and add a <base href="/"> or the equivalent provider in bootstrap() — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 2, 2016 at 10:34
You need to use absolute paths to images (relative to base). In your case assets/plugins/test/img/bg.jpg. — dfsq
– dfsq, Commented Mar 2, 2016 at 11:15
So, if I want to include external jquery plugin that has some css with images, I will have to fix image paths manually? I think manually adding <link rel="stylesheet" href="..."/> element to header on ngViewLoaded is a better way. But isn't there any official way to solve this problem? — Luke
– Luke, Commented Mar 2, 2016 at 11:37

Community · Accepted Answer · 2017-05-23 12:34:15Z

11

In this blog is posted how styles in angular2 override each other http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html

Citation: "Where do those end up in the DOM? Well, for the same reason as explained earlier, they are written into the head of the document. But not only that, when Angular fetches the style resources, it takes the text response, inlines and appends them after all component inline styles."

Template Inline Styles have the highest priority in Angular2

When working with <link rel="stylesheet" href="..."/> in the header see this thread CSS file paths are not resolving properly with angular ng-view, there has to be pre-fixed a '/'

<link rel="stylesheet" href="/styles/main.css"/> instead of <link rel="stylesheet" href="styles/main.css"/>

In this thread is additional explanation Load external css style into Angular 2 Component

Three Ways to Insert CSS

Maybe the easiest workaround is to insert the full path in the css

.sample { background-image: url(/assets/plugins/test/img/bg.jpg); }

instead of

.sample { background-image: url(../img/bg.jpg); }

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Mar 2, 2016 at 10:40

ralf htp

9,4805 gold badges25 silver badges35 bronze badges

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

4 Comments

Adrian M. Over a year ago

Only Angular2 would make importing a jpeg time-consuming.

Francesco Borzi Over a year ago

the absolute path only works when your Angular app is running in the root directory of the domain. If your apps runs in a subdirectory like example.com/subdirectory/ then this fix will not work

Gilles Over a year ago

@FrancescoBorzi what should I do if my app is in a subdirectory?

Francesco Borzi Over a year ago

@Gilles sorry I don't know, I don't remember how I dealt with this specific problem

Ravinder Payal · Accepted Answer · 2016-05-18 15:31:55Z

2

You should load / import data in css file according to the base path of your app (You may add <base href="YOUR_APP_DIRECTORY_PATH" /> as first child of head tag of index.html for consistency) like this

body{
background:url(img/img.jpg);
}

Your Directory Structure should be like this
../
   ../
     YOUR_APP_DIRECTORY/
                        img/
                             Your Images

answered May 18, 2016 at 15:31

Ravinder Payal

3,0291 gold badge34 silver badges43 bronze badges

2 Comments

blong824 Over a year ago

Are you using webpack? Can you show what loader you use for your css?

blong824 Over a year ago

I had to update my css loader. I was using the raw loader and that wasn't working. I switched my loader to 'css-to-string-loader!css-loader' and all works well now. Thanks

Collectives™ on Stack Overflow

Angular2 included css image path

Update 1

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 1

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related