Angular CLI - Wie löst man eine URL in CSS oder SCSS auf?

Question

Ich habe eine Komponente, deren SCSS ein Bild im selben Komponentenordner referenziert, mit background-image: url('./logo.jpg').

Das Entfernen der führenden ./ hilft auch nicht. In jedem Fall wird das Bild nicht im Browser angezeigt.

Ich renne ng serve und mit Blick auf die dist Ordner, Logo.jpg wird in der Tat kopiert und in den gleichen Komponentenordner wie erwartet platziert.

Ich würde auch gerne in der Lage sein, Bilder von anderen Orten außerhalb des Ordners, in dem meine .css oder .scss Datei lebt, mit relativen Pfaden wie ich mit meiner Komponente .html und .css aus der .ts-Datei .

Ich denke, ich brauche eine Art von URL-Resolver, die die vollständige URL auf der ausgegebenen .css-Datei generieren würde. Wie würde ich einen solchen Resolver erhalten und wie konfiguriere ich ihn in Angular CLI?

Answer 1

Ich bemerkte ein ähnliches Verhalten.

Es scheint, dass Bilder, auf die im CSS unter dem Ordner Assets verwiesen wird, extrahiert und mit einer GUID versehen werden, während das Gleiche nicht für CSS auf Komponentenebene gilt.

Am Ende habe ich die Bilddatei unter dem Assets Ordner kopiert (ohne es in Angular-cli.json Referenzierung) und dann mit Ich konnte es in der Komponente CSS verweisen:

background: url (Aktiva /img/bgs/footer.png);

Answer 2

Hatte das gleiche Problem. Gelöst, indem Sie den Pfad in der Less/Sass-Datei zu url(/assets/path_to_img) geändert haben und es sollte funktionieren. Vergiss nicht die "/" am Anfang und dein Bild in den Ordner "Assets" zu legen.

Answer 3

versuchen Sie dieses Hintergrundbild: url ("./ ~/assets/images/artist-bg.jpg");