Блог

Я создал библиотеку angular с компонентом, который имеет тег image, который использует изображение из папки assets в библиотеке, как показано ниже

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

И я пытаюсь использовать библиотеку в приложении angular. Я смог объединить папку assets вместе с библиотекой и изменил свой файл angular.json, чтобы иметь опцию assets, как показано ниже

{ «глобус»: «**/*», » ввод»: «node_modules/@uitest/ui-test/assets», «вывод»: «/projects/ui-test-app/src/assets» }

При выполнении вышеуказанных шагов я вижу, что папка assets копируется в папку dist, связанную с приложением angular, при ее создании

Но если я использую команду ng serve для запуска приложения на локальном хосте, изображение не загружается, поскольку папка ресурсов не найдена

Ссылка Git hub на тестовое приложение для воспроизведения проблемы https://github.com/spiderprn/ui-test.git

Что, если вы скопируете эту папку в ресурсы перед подачей, 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 amp;amp; npm run copy_files amp;amp; npm run start"
  },
  

Добавьте следующее в 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>"
}
  

Этот формат img тега выглядит следующим образом. Вам нужно указать правильный путь в src

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