Image not found using angular material

Question

I get this error when trying to display an image:

http://localhost:4200/daily-process/src/WebUI/Angular/src/images/DailyProcessBlack.png 404 (Not Found)

I put the image in a mat-card and I can see the image when I navigate to the folder path but it doesn't show on the site:

<mat-card class="example-card">
 <mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
 </mat-card-header>
<img mat-card-image src="/daily-process/src/WebUI/Angular/src/images/DailyProcessBlack.png" 
alt="Image">  
</mat-card>

angular.json

 {
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
  "daily-process": {
  "projectType": "application",
  "schematics": {},
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/daily-process",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        // "styles": [
        //   "src/styles.css"
        // ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "daily-process:build:production"
        },
        "development": {
          "browserTarget": "daily-process:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "daily-process:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        // "styles": [
        //   "src/styles.css"
        // ],
         "scripts": []
        }
      }
    }
  }
 },
 "defaultProject": "daily-process"
}

Image of folder structure

Can someone please provide a reason why and a solution to what I need to do to get this to work properly.

Answer 1

In angular.json there is an array called assets

These are the default values

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

This is where angular will host files / images. You can put your assets in src/assets, or you can add your own paths.

There are two copies of the assets array - one for the build command and one for the test command, so make sure to keep them synchronized.

Answer 2

I recommend you to put that image in assets folder inside your app, and the route you need to add is assets/images/DailyProcessBlack.png If you have problem with that route try to test local or global route, but you need to add the image inside assets, otherwise you would have to modify the angular.json file