在角度库中添加图像资源

Question

我正在创建一个角度库，以便我可以在两个项目之间重用某些功能，而无需复制和粘贴。

我面临一个问题：如何添加图像以在 Angular 库中使用？我必须承认，文档在这个主题上不是很清楚，而且它并没有真正帮助我。我浏览并阅读了几篇文章，但没有什么可以帮助我。

这是我一直在尝试做的事情，但到目前为止还没有成功

我已经配置了 ng-package.json 文件以将我的资产文件夹添加到其构建中

ng-package.json 文件

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/blog-editor",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./src/styles"
    ]
  },
  "assets": [
    {
      "glob": "**/*",
      "input": "src/assets",
      "output": "/assets/"
    }
  ]
}

源文件夹

构建文件夹

这是我尝试在代码中使用此图像的方法

  <div style="position: relative; aspect-ratio: 16/9; border-width: 1px; border-color: rgb(203 213 225);">
    <img [ngSrc]="ctrl.value || './assets/images/default-cover.svg'" alt="cover image" style="object-fit: cover" fill
         priority>
  </div>

这是我在主机应用程序上运行库时遇到的错误

PS：

• 我的项目在 Angular 17 下
• 我用来构建项目的命令

  ng build blog-editor --watch --configuration development

• 如何启动主机应用程序以在本地测试我的库

  ng serve --project blog-editor-playground

Answer 1

这是预期的，您错过了将文件添加到应用程序资产的步骤。 Angular 不会“神奇地”添加任何库中的所有资源，这是有充分理由的。要复制资源，请将以下内容添加到您的

angular.json

:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          // ... other build configuration
          "options": {
            // ... other build options
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/your-lib/assets/",
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

请参阅应用程序资产配置文档。