Angular2 inklusive css-image-Pfad

Als ich zählen Stil in Komponente wie folgt:

@Component({
    styleUrls: [
         "assets/plugins/test/css/style.css"
    ],
    encapsulation: ViewEncapsulation.None
})

und wenn Stil enthält Verweise auf Bilder, zum Beispiel

.sample { background-image: url(../img/bg.jpg); }

browser versucht zu finden bg.jpg bei base url (http://localhost/bg.jpg) statt, die es suchen soll, wird das Bild im "http://localhost/assets/plugins/test/img/".

Passiert, wenn Angular2 fügt Stil zwischen style - tags. Ist es möglich, Angular2 einfügen <link href="..."/> statt?

Update 1

Plunker: http://plnkr.co/edit/SHJzVHOyTuLu106r6tpD öffnen der browser-Entwickler-Konsole und suchen Sie nach "bg.jpg"

  • Hat Ihre Seite überhaupt geladen, wenn Sie neu laden mit F5? Siehe auch stackoverflow.com/questions/31415052/..., Siehe auch stackoverflow.com/questions/34535163/...
  • Alles andere läuft einwandfrei
  • Ich denke immer noch, meine links bieten die Lösung. Einen server verwenden, der unterstützt pushState oder änderung HashLocationStrategy und fügen Sie eine <base href="/"> oder der entsprechende Dienstleister in der bootstrap()
  • Sie müssen absolute Pfade zu den Bildern (relativ zur Basis). In Ihrem Fall assets/plugins/test/img/bg.jpg.
  • Also, wenn ich will auch auf externe jquery-plugin, das einige css mit den Bildern, ich werde zu beheben, Bild Pfade manuell? Ich denke, dass manuelles hinzufügen <link href="..."/> element header auf ngViewLoaded ist der bessere Weg. Aber gibt es nicht irgendeine offizielle Weg, um dieses problem zu lösen?
InformationsquelleAutor Luke | 2016-03-02
  1. 9

    In diesem blog gepostet wird, wie Formatvorlagen in angular2 überschreiben sich gegenseitig http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html

    Zitat: "Wo führen die am Ende in den DOM? Gut, aus dem gleichen Grund wie zuvor erläutert, Sie sind geschrieben in den Kopf des Dokuments. Aber nicht nur das, als Eckige holt sich die style-Ressourcen, die es dauert, den text der Antwort, inlines und hängt Sie, nachdem alle Komponenten wie inline-styles."

    Vorlage Inline-Styles haben die höchste Priorität in Angular2

    Beim arbeiten mit <link href="..."/> im header-siehe diesen thread CSS-Datei-Pfade auflösen werden nicht korrekt mit Winkel-ng-view, es hat vor-fest ein"/'

    <link href="/styles/main.css"/> statt <link href="styles/main.css"/>

    In diesem thread ist eine zusätzliche Erklärung Laden externer css-style in den Winkel-2-Komponente

    Drei Möglichkeiten zum Einfügen von CSS

    Vielleicht die einfachste Lösung ist das einfügen der vollständigen Pfad in der css -

    .sample { background-image: url(/assets/plugins/test/img/bg.jpg); }

    statt

    .sample { background-image: url(../img/bg.jpg); }
    • Nur Angular2 würde der Import von jpeg zeitaufwendig.
    • der absolute Pfad funktioniert nur, wenn Ihre Winkel-app ausgeführt wird, in das root-Verzeichnis der domain. Wenn Sie Ihre apps läuft in einem Unterverzeichnis wie example.com/subdirectory/ dann dieses Update wird nicht funktionieren
    InformationsquelleAutor ralf htp
  2. 2

    Sollten Sie das laden /importieren von Daten in der css-Datei entsprechend der Basis-Pfad Ihrer app (Sie können hinzufügen <base href="YOUR_APP_DIRECTORY_PATH" /> als erstes Kind von head-tag index.html für die Konsistenz) wie diese 

    body{
background:url(img/img.jpg);
}

Your Directory Structure should be like this
../
   ../
     YOUR_APP_DIRECTORY/
                        img/
                             Your Images
    • Sind Sie mit webpack? Können Sie zeigen, was loader, die Sie für Ihr css?
    • Ich hatte zu aktualisieren meine css-loader. Ich war mit der raw-loader und das war nicht in Ordnung. Ich schaltete mein loader zu " css-zu-string-loader!css-loader " und alles funktioniert gut jetzt. Dank
    InformationsquelleAutor Ravinder Payal
Schreibe einen Kommentar