18

Have setup an angular app using the angular CLI and have created a component that has an image in the components directory.

For example:

app/
---/common-components
------/header
---------/header.component.ts
---------/header.component.css
---------/images
--------------/image.png

Within the CSS file I am using the following style:

.image {
    background-url: url('images/image.png');
}

When I run the application it gives me a 304 Not Modified and the image does not show up int he preview. If I use an absolute path '/src/app/common-components/header/images' the file loads properly. However, this is not ideal since I would like the component to be self sufficient.

The response that is given is:

Request URL:http://localhost:4201/images/test-image.jpeg
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:4201

With a blank preview

glandrum101
  • 466
  • 1
  • 3
  • 11

4 Answers4

31

All static asset files/directories need to be listed in the angular-cli.json file.

Adding assets

To add your assets you can either:

  • Put your image file in the default assets folder (which is already listed in the angular-cli.json file.
  • Or add a new directory inside of app/ (e.g. in your case you could use app/images, and then reference that in angular-cli.json)

angular-cli.json:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "images"
      ]
    }
  ]
}

Referencing files

Like @jali-ai mentioned in the comments background-url should be background-image and you can refer to your asset like this:

.image {
   background-image: url('images/image.png'); 
}

Here is an example of the angular-cli.json file and a reference to an asset

adriancarriger
  • 2,970
  • 3
  • 19
  • 26
  • Are you implicitly saying that the OP's intent isn't possible? i.e. having the image 'local' to the component? I was able to accomplish it using SystemJS as the bundler. Is this perhaps considered incorrect Angular2 component composition? – Mikezx6r Nov 28 '16 at 02:25
  • 1
    I've been using webpack and have not found a full solution to this, which makes it more difficult to create reusable components. You can inline SVGs in your css, but I usually just put everything in an assets folder. Here's a related issue: [#6637](https://github.com/angular/angular/issues/6637) – adriancarriger Nov 28 '16 at 02:52
  • 1
    If you like to have assets with you module directory it selves, you can add your assets folders pattern something like '*\**/images/**.png' – Naveen raj Mar 04 '17 at 17:37
  • i tried the same with 'less', but it is not working. – Krishna Mohan Jun 28 '17 at 09:46
  • The assets list has nothing to do with resolving files. It is for directly copying files over when you build. https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md Your background image link worked because your images folder is inside of your app root (src) – UserX Sep 11 '17 at 01:31
  • Agree with UserX. You need to restart the app. It will work. – Niraj Tathe Sep 20 '17 at 17:01
3

It seems to be still an issue with angular-CLI and webpack (using 1.0.3).

If you add the asset folder to the angular-cli.json and define the path relatively, the build still fails, not finding the ressources url('someRelativeLink').

I used a work around and put all CSS definitions in:

@Component({
  styles: [...]
})

Instead of a styleUrls file.

After doinig that everything was fine.

ÐerÆndi
  • 139
  • 10
3

You can use caret syntax to ignore url processing

background-image: url('^images/objects/loader.png');

Angular CLI just passthrough your url removing Caret

background-image: url('images/objects/loader.png');
ximage
  • 483
  • 1
  • 4
  • 7
-1
.image {
    background-image: url('./assets/images/image.png'); 
}
khellang
  • 17,550
  • 6
  • 64
  • 84
jaimin patel
  • 209
  • 2
  • 3