We can serve an image in angular2 by first placing the image in the assets directory of your project where you can create a specific directory for the images or just keep it in the assets directory as it is.
Once you have put all the required images in the assets directory open the specific component typescript (.ts) file where you want to serve the image. Now you can add the URL of the image in a variable within the constructor so that it is initialized upon component creation.
Now modify the component’s template file to fetch the image.
You can also fetch a web image directly from the website or database(For Ex. Firebase) by providing the full valid URL of the image.
In angular2, images and other media are by default fetched from the assets directory within your project folder(all other directories of the project are not public to the components by default) this can be changed by modifying angular-cli.json.Within this JSON file add your media directory by adding it in the assets object property.
- How to display multiple horizontal images in Bootstrap card ?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- How to truncate text in Angular2?
- How to use ngIf without an extra element in Angular2?
- How to trigger Form Validators in Angular2 ?
- How to pass string to a component using Angular2 ?
- AngularJS vs Angular2 | Features and Comparison
- What is the difference between display: inline and display: inline-block in CSS?
- CSS | Border Images
- CSS | Polaroid Images
- CSS | Styling Images
- Semantic-UI | Images
- Bootstrap 4 | Images
- HTML | Images
- How to put images in a box without space using Bootstrap?
- How to set multiple background images using CSS?
- SASS variable for images path
- HTML | DOM images Collection Property
- How to download Google Images using Python
- How to use grid for images in bootstrap card ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.