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:
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.
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.
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.