Изображение не получает ссылки из HTML в угловых

Question

В моем угловом проекте я ссылаюсь на изображение (book.svg) в файле test.component.html, которое вообще не работает. В консоли он ссылается на localhost: 4200: /assets/book.svg и, следовательно, не может найти его

У нас немного другая структура проекта, с библиотеками и приложениями, как показано.

Пожалуйста, дайте мне знать, где проблема и как это исправить.

Использовали require (), чтобы заставить его работать, но это не проходит тестовые случаи, поэтому не ищите require ().

<button mat-icon-button >
                <a class="reference-route" routerLink="reference" title="Reference">
                    <img class="reference-image" src="./assets/book.svg" />
                </a>
</button>



the code structure:

project
   ----------apps
       -------------xyz-frontend
           -------------src
               -------------assets
                     ----------book.svg
   ----------libs
       -------------shared
           -------------shared-ui
               -------------src
                    ----------lib
                        ----------test
                             ----------test.component.ts
                             ----------test.component.html
                    ----------assets
                        ----------book.svg

angular.json

"projects": {
    "xyz-frontend": {
      "root": "apps/xyz-frontend/",
      "sourceRoot": "apps/xyz-frontend/src",
      "projectType": "application",
      "prefix": "apps/xyz-frontend",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "index": "apps/xyz-frontend/src/index.html",
            "main": "apps/xyz-frontend/src/main.ts",
            "polyfills": "apps/xyz-frontend/src/polyfills.ts",
            "tsConfig": "apps/xyz-frontend/tsconfig.app.json",
            "assets": [
              "apps/xyz-frontend/src/favicon.ico"
            ],
            "styles": [
              "apps/xyz-frontend/src/styles.scss",
              "libs/shared/shared-styles/src/themes/a4a-theme.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/xyz-frontend/src/environments/environment.ts",
                  "with": "apps/xyz-frontend/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "xyz-frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "xyz-frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "xyz-frontend:build"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/xyz-frontend/tsconfig.app.json",
              "apps/xyz-frontend/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "shared-assets": {
      "root": "libs/shared/shared-assets",
      "sourceRoot": "libs/shared/shared-assets/src",
      "projectType": "library"
    },
    "shared-ui": {
      "root": "libs/shared/shared-ui",
      "sourceRoot": "libs/shared/shared-ui/src",
      "projectType": "library",
      "prefix": "xyz",
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "libs/shared/shared-ui/src/test.ts",
            "tsConfig": "libs/shared/shared-ui/tsconfig.spec.json",
            "karmaConfig": "libs/shared/shared-ui/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared/shared-ui/tsconfig.lib.json",
              "libs/shared/shared-ui/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },

Answer 1

Обычно ваш импорт должен выглядеть следующим образом:

 <img class="reference-image" src="assets/book.svg" />

Как выглядит ваша angular.json файл assets часть?

В Angular 6+ это должно быть как:

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