无法在角度应用程序中查看库中的图像答案

【问题标题】：Unable to view the image from library in angular applicaiton无法在角度应用程序中查看库中的图像
【发布时间】：2023-03-20 10:10:01
【问题描述】：

我已经创建了带有图像标签的组件的角度库，该标签使用库中资产文件夹中的图像，如下所示

<img src="assets/sample.jpg"/>

我正在尝试在 Angular 应用程序中使用该库。我可以将资产文件夹与库捆绑在一起，并修改我的 angular.json 文件以具有资产选项，如下所示

{ “glob”：“**/*”，“输入”：“node_modules/@uitest/ui-test/assets”，“输出”：“/projects/ui-test-app/src/assets” }

在执行上述步骤时，我看到 assets 文件夹被复制到与构建它的 Angular 应用程序相关的 dist 文件夹中

但是，如果我使用 ng serve 命令在 localhost 中运行应用程序，则图像不会加载，因为找不到资产文件夹

测试应用程序的 Git hub 链接以重现问题https://github.com/spiderprn/ui-test.git

【问题讨论】：

你试过还是？

标签： angular angular-library

【解决方案1】：

将以下内容添加到 angular.json 中，其中 <your-lib> 是您的库的名称：

"assets": [
  "src/favicon.ico",
  "src/assets",
  { "glob": "**/*", "input": "./node_modules/<your-lib>/assets", "output": "./assets/<your-lib>" }
],

对于库中的项目使用：

{
  "glob": "**/*",
  "input": "./dist/<your-lib>/assets",
  "output": "./assets/<your-lib>"
}

【讨论】：

【解决方案2】：

如果您在投放之前将该文件夹复制到资产中会怎样，npm run myServe。

父项目的package.json：

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build_lib": "ng build ui-test-app",
    "copy_files": "copy .\\projects\\ui-test-app\\src\\assets .\\dist\\assets",
    "myServe": "npm run build_lib && npm run copy_files && npm run start"
  },

【讨论】：

【解决方案3】：

img标签的这种格式如下。你需要在src中给出正确的路径

<img src="assets/sample.jpg">

【讨论】：