使用 angular material 找不到图像

Question

我在尝试显示图像时遇到此错误：

http://localhost:4200/daily-process/src/WebUI/Angular/src/images/DailyProcessBlack.png 404（未找到）

我将图像放在卡片中，当我导航到文件夹路径时可以看到图像，但它没有显示在网站上：

<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"
}

文件夹结构图

有人可以提供原因以及我需要做些什么才能使其正常工作的解决方案。

Answer 1

我建议你把那个图片放在你应用的assets文件夹里，你需要添加的路径是assets/images/DailyProcessBlack.png 如果您对该路由有问题，请尝试测试本地或全局路由，但您需要在资产中添加图像，否则您将不得不修改 angular.json 文件

Answer 2

在angular.json中有一个名为assets

的数组

这些是默认值

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

angular 将在此处托管文件/图像。您可以将您的资源放在 src/assets 中，也可以添加您自己的路径。

assets 数组有两份 - 一份用于 build 命令，一份用于 test 命令，因此请确保它们保持同步。

使用 angular material 找不到图像

Image not found using angular material

image

angular