在 angular.json 中從 root 添加前綴

Question

我在 angular.json 中有這個代碼：

"root": "admin/",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/admin/",
        "deployUrl": "/admin/",
        "outputPath": "dist/front/admin",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          {
            "glob": "**/*",
            "input": "src/assets/",
            "ignore": ["**/*.svg"],
            "output": "/assets/"
          }
        ],
...

但是我無法顯示圖片。 這不起作用：

 <img src="/assets/images/test.png">

這工作正常：

<img src="admin/assets/images/test.png">

如何在 angular.json 中為每個資產設置“admin/”前綴？

Answer 1

您可以使用Directive為所有img標簽的src屬性設置前綴。

步驟是：

1. 通過cli生成directive ：

ng generate directive set-img-src-prefix

2. 配置新生成的directive如：

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'img' // selects all img tags
})

export class SetImgSrcPrefixDirective {
  constructor(public ref:ElementRef) {
    // change anything you want globally here
  }
}

3. 作為最后一步，您必須在app.module.ts添加此directive ：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SetImgSrcPrefixDirective} from './set-img-src-prefix.directive'; // import the directive here

@NgModule({
  declarations: [
    AppComponent,
    SetImgSrcPrefixDirective // add here
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }