current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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

share|improve this question
    
Did you trying loading the image like url('./images/image.png')? – nicowernli Nov 22 '16 at 17:08
    
@nicowernli yep, I tried that as well and it did not work. – glandrum101 Nov 22 '16 at 17:12
    
The css property is background-image not background-url – jal_azimi Nov 22 '16 at 17:50
    
@jali-ai Changed that, but that doesn't fix the issue. – glandrum101 Jan 5 at 15:30
up vote 1 down vote

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

share|improve this answer
    
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 2: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 – adriancarriger Nov 28 '16 at 2:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.