it-swarm.com.de

Angular CLI verwenden und relative Bildpfade in CSS-Dateien nicht verwenden können

Richten Sie eine Winkel-App mit der Winkel-CLI ein und haben Sie eine Komponente erstellt, die ein Abbild im Komponentenverzeichnis enthält.

Zum Beispiel:

app/
---/common-components
------/header
---------/header.component.ts
---------/header.component.css
---------/images
--------------/image.png

In der CSS-Datei verwende ich den folgenden Stil:

.image {
    background-url: url('images/image.png');
}

Wenn ich die Anwendung starte, wird mir eine 304 Nicht geändert angezeigt und das Bild wird in der Vorschau nicht angezeigt. Wenn ich einen absoluten Pfad '/ src/app/common-components/header/images' verwende, wird die Datei ordnungsgemäß geladen. Dies ist jedoch nicht ideal, da ich möchte, dass die Komponente autark ist.

Die Antwort, die gegeben wird, ist:

Request URL:http://localhost:4201/images/test-image.jpeg
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:4201

Mit einer leeren Vorschau

18
glandrum101

Alle statischen Asset-Dateien/Verzeichnisse müssen in der angular-cli.json-Datei aufgeführt sein.

Assets hinzufügen

Um Ihr Vermögen hinzuzufügen, können Sie entweder:

  • Legen Sie Ihre Bilddatei im Standardordner assets ab (der bereits in der angular-cli.json-Datei aufgeführt ist.
  • Oder fügen Sie ein neues Verzeichnis in app/ hinzu (beispielsweise könnten Sie in Ihrem Fall app/images verwenden und dann in angular-cli.json darauf verweisen)

angle-cli.json:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "images"
      ]
    }
  ]
}

Dateien referenzieren

Wie @ jali-ai, das in den Kommentaren erwähnt wird, sollte background-urlbackground-image sein und Sie können auf Ihr Asset folgendermaßen verweisen:

.image {
   background-image: url('images/image.png'); 
}

Hier ist ein Beispiel der angle-cli.json-Datei und einer Referenz auf ein Asset

29
adriancarriger

Es scheint immer noch ein Problem mit angle-CLI und Webpack (mit 1.0.3) zu sein.

Wenn Sie den Asset-Ordner zum angular-cli.json hinzufügen und den Pfad relativ definieren, schlägt der Build weiterhin fehl und die Ressourcen url('someRelativeLink') werden nicht gefunden.

Ich habe eine Arbeit gemacht und alle CSS-Definitionen eingefügt:

@Component({
  styles: [...]
})

Anstelle einer styleUrls-Datei.

Nachdem ich getan hatte, dass alles in Ordnung war.

2
ÐerÆndi
.image {
    background-image: url('./assets/images/image.png'); 
}
0
jaimin patel