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

Improve this question
4
  • Did you trying loading the image like url('./images/image.png')? Commented Nov 22, 2016 at 17:08
  • @nicowernli yep, I tried that as well and it did not work. Commented Nov 22, 2016 at 17:12
  • 1
    The css property is background-image not background-url Commented Nov 22, 2016 at 17:50
  • @jali-ai Changed that, but that doesn't fix the issue. Commented Jan 5, 2017 at 15:30

4 Answers 4

Reset to default
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

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

6 Comments

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?
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
If you like to have assets with you module directory it selves, you can add your assets folders pattern something like '**/images/*.png'
i tried the same with 'less', but it is not working.
The assets list has nothing to do with resolving files. It is for directly copying files over when you build. github.com/angular/angular-cli/blob/master/docs/documentation/… Your background image link worked because your images folder is inside of your app root (src)
|
5

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');
Improve this answer

Comments

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.

Improve this answer

Comments

-1 
.image { background-image: url('./assets/images/image.png'); }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.