Angular2 – Using Images, CSS and other assets:

In this post, we are going to learn how we can use assets including image and CSS style in an angular 2 application. Let’s use the banner of our blog site as the image:

alternate-stack

In order to keep our example simple, we are using a very basic style setting the width and height of an image to a specific value.

All the assets in an angular 2 app are created in public folder. Here we have created two sub-folders; images and stylesheets. Both of these folders just have one component corresponding to their folder names.

image-styles

As we build the project using ng b command. All the constituents of the folder are copied directly to disk directory. Please notice stylesheets and images folder in the dist folder below.

dist-asssets

In order to use them, we can simply use relative path from dist folder. Here we are adding a reference for stylesheet app-styles.css.

And here we are adding image to our application. We are using the class as-banner which we defined above.

As we ng serve the app, the image is displayed with the style applied correctly.

GitHub Repository