0
votes

Impossible d'afficher l'image de la bibliothèque dans une application angulaire

J'ai créé une bibliothèque angulaire avec un composant qui a une balise d'image qui utilise l'image du dossier des actifs dans la bibliothèque comme ci-dessous

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

Et j'essaye d'utiliser la bibliothèque en application angulaire. J'ai pu regrouper le dossier des actifs avec la bibliothèque et modifier mon fichier angular.json pour avoir l'option des actifs comme ci-dessous

{"glob": "** / *", "input": "node_modules / @ uitest / ui-test / assets", "output": "/ projects / ui-test-app / src / assets"}

Tout en faisant les étapes ci-dessus, je vois que le dossier des actifs est copié dans le dossier dist lié à l'application angulaire lors de sa construction

Mais si j'utilise la commande ng serve pour exécuter l'application dans localhost, l'image ne se charge pas car le dossier des actifs n'est pas trouvé

Lien du hub Git vers l'application de test pour reproduire le problème https://github.com/spiderprn/ui-test.git

angular angular-library

1 commentaires

Avez-vous essayé <img src = "~ / assets / sample.json" /> ou <img src = "./ assets / sample.json" />?

3 Réponses :

-1
votes

Ce format de balise img est le suivant. Vous devez donner le chemin correct dans src

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

0 commentaires

1
votes

Que faire si vous copiez ce dossier dans les actifs avant la npm run myServe , npm run myServe .

package.json du projet parent:

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

0 commentaires

0
votes

Ajoutez ce qui suit à angular.json où <your-lib> est le nom de votre bibliothèque:

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

Pour un projet dans la bibliothèque, utilisez:

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

0 commentaires