Chemin relatif pour les fichiers statiques (images/css/js etc

J'ai structure de dossier de /src/app/some-module/some-component et src/public/images/user.png. Maintenant, quand je suis wiling à afficher une image dans mon quelques-composant je dois donner le chemin d'accès comme ../../../public/images/user.png qui semble être trop naïf et un gaspillage d'efforts une fois que le nombre d'images augmente.

Faire, nous avons un mécanisme de routage ou de chemin d'accès relatif en place dans angular2 pour servir les fichiers statiques. Je suis l'aide de la Angular2 avec webpack.

OriginalL'auteur Sumit Agarwal | 2016-09-30

  1. 5

    Il dépend de la façon dont votre base href ressemble.

    Pour l'e.g si vous avez 

    <base href="/src/">

    vous pouvez facilement utiliser ci-dessous indépendamment de l'endroit où votre modèle de composant est. 

    <img src="public/images/user.png" />

    Espérons que cette aide!!

    OriginalL'auteur Madhu Ranjan

  2. 1

    Si vous utilisez WebPack, il prend en charge les chemins d'accès lors de la compilation.
    Le <img src="..."> doit pointer vers l'emplacement physique du fichier dans le projet, par rapport au modèle où il est utilisé.

    Par exemple, dans mon cas, sans WebPack, il serait

    <img src="img/rhamt-square-248.png" width="172">

    depuis le img/ est directement sous la racine d'application.

    Alors qu'avec WebPack, cela fonctionne:

    <img src="../../../img/rhamt-square-248.png" width="172">

    Sinon, vous obtiendrez une erreur de compilation telles que:

    D'ERREUR ./src/app/misc/about.component.html

    Module non trouvé: Erreur: ne Peut pas résoudre './img/rhamt-carré-248.png' dans '/home/daniel/travail/Migration/liquidation-web/ui/src/main/webapp/src/app/misc'

    @ ./src/app/misc/about.component.html 1:402-439

    @ ./src/app/misc/about.composante.ts

    @ ./src/app/app.le module.ts

    @ ./src/main.ts

    OriginalL'auteur Ondra Žižka