angular-assets-config

Introduction

How Angular handles assets file such as images, fonts and other static files in the project.

Angular 18+

The following config from angular.json indicates that the Angular builder will copy everything under public folder to the outputPath: dist folder.

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
],

So

1. Put your logo file(angular.svg) under public folder
2. In your component file, you can just use it as below:

<img src="angular.svg" alt="Angular Logo" />

To verify whether the image was in the final build, you can run the following command and check the dist folder under project root.

ng build

If you want to use the old way, you can config angular.json file as below, in this config, we copy everything under src/assets folder to dist folder.(Note, if you omit the output option, the assets folder will not copied, it only copy images folder)

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  },
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets"
  }
],

Then use it in your component file as below:

<img src="assets/images/angular.svg" alt="Angular Logo" />

Before Angular 18

angular.json config

"assets": [
  "src/favicon.ico",
  "src/assets"
],

Asset file path: src/assets/images/angular.svg

Use it in your component file as below:

<img src="assets/images/angular.svg" alt="Angular Logo" />

References

1. https://angular.dev/reference/configs/workspace-config#assets-configuration