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 http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser See also http://stackoverflow.com/questions/34535163/angular-2-router-no-base-href-set/34535256#34535256 — Günter Zöchbauer, Mar 02 '16 at 09:59
I still think my provides links provide the solution. Use a server that supports pushState or change to `HashLocationStrategy` and add a `` or the equivalent provider in `bootstrap()` — Günter Zöchbauer, Mar 02 '16 at 10:34
You need to use absolute paths to images (relative to base). In your case `assets/plugins/test/img/bg.jpg`. — dfsq, Mar 02 '16 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 `` element to header on `ngViewLoaded` is a better way. But isn't there any official way to solve this problem? — Luke, Mar 02 '16 at 11:37

score 11 · Answer 1 · edited May 23 '17 at 12:34

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 '17 at 12:34

Community

1
1

answered Mar 02 '16 at 10:40

ralf htp

9,149
4
22
34

4

Only Angular2 would make importing a jpeg time-consuming. – Adrian M. Apr 27 '17 at 18:39
1

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 – Francesco Borzi Oct 05 '18 at 12:49
@FrancescoBorzi what should I do if my app is in a subdirectory? – Gilles Aug 13 '19 at 17:22
@Gilles sorry I don't know, I don't remember how I dealt with this specific problem – Francesco Borzi Aug 13 '19 at 17:51

score 2 · Answer 2 · answered May 18 '16 at 15:31

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 '16 at 15:31

Ravinder Payal

2,884
31
40

Are you using webpack? Can you show what loader you use for your css? – blong824 Sep 15 '16 at 19:04
1

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 – blong824 Sep 16 '16 at 15:34

Angular2 included css image path

Update 1

2 Answers2