Relativen Pfad für statische Dateien wie Bilder/css/js etc.

Ich habe die Ordner-Struktur von /src/app/some-module/some-component und src/public/images/user.png. Nun, wenn ich bin, erklärte sich bereit, zu zeigen, ein Bild in meine einige-Komponente habe ich den Pfad als ../../../public/images/user.png zu sein scheint, zu naiv und verschwenderisch Mühe, wenn die Anzahl der Bilder erhöhen.

Haben wir einen routing-Mechanismus oder relativen Pfad in angular2 zu dienen statische Dateien. Ich bin mit dem Angular2 mit webpack.

InformationsquelleAutor Sumit Agarwal | 2016-09-30

  1. 5

    Es hängt davon ab, wie Ihre base href aussieht.

    E.g wenn Sie 

    <base href="/src/">

    können Sie einfach unten aus, unabhängig davon, wo Sie Ihre Komponenten-template ist. 

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

    Hoffe, das hilft!!

    InformationsquelleAutor Madhu Ranjan

  2. 1

    Wenn Sie WebPack, es kümmert sich um die Pfade beim kompilieren.
    Die <img src="..."> muss auf den physischen Speicherort der Datei innerhalb des Projekts, bezogen auf die Vorlage, wo es verwendet wird.

    Beispielsweise in meinem Fall, ohne WebPack, es wäre

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

    da die img/ ist direkt unter der app root.

    In der Erwägung, dass mit WebPack, das funktioniert:

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

    Sonst würden Sie erhalten einen Kompilierungsfehler, wie:

    FEHLER bei ./src/app/misc/about.component.html

    Modul nicht gefunden: Error: Can ' T resolve './img/rhamt-Quadrat-248.png " in " /home/ondra/work/Migration/windup-web/ui/src/main/webapp/src/app/misc

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

    @ ./src/app/misc/ca.Komponente.ts

    @ ./src/app/app.- Modul.ts

    @ ./src/main.ts

    InformationsquelleAutor Ondra Žižka

Schreibe einen Kommentar