时间戳

首页 > 解决方案 > 无法在角度应用程序中查看库中的图像

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

问题描述

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

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

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

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

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

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

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

标签： angularangular-library

解决方案

如果您在服务之前将该文件夹复制到资产中，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"
  },

推荐阅读