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

Question

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

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

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

{ "glob": "**/*", "输入": "node_modules/@uitest/ui-test/assets", "输出": "/projects/ui-test-app/src/assets" }

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

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

Git 集线器 link 测试应用程序以重现问题 https://github.com/spiderprn/ui-test.git

Answer 1

这个img标签的格式如下。您需要在 src

中提供正确的路径

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

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

Answer 3

将以下内容添加到 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>"
}

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

Unable to view the image from library in angular applicaiton

angular

angular-library