web-dev-qa-db-fra.com

Utilisation de la CLI angulaire et impossibilité d'utiliser les chemins d'image relatifs dans les fichiers CSS

Configurez une application angulaire à l'aide de la CLI angulaire et créez un composant comportant une image dans le répertoire des composants.

Par exemple:

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

Dans le fichier CSS, j'utilise le style suivant:

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

Lorsque je lance l'application, il me donne un 304 Non modifié et l'image ne s'affiche pas dans l'aperçu. Si j'utilise un chemin absolu '/ src/app/composants communs/en-tête/images', le fichier est chargé correctement. Cependant, ce n'est pas idéal car je souhaiterais que le composant soit autonome.

La réponse qui est donnée est:

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

Avec un aperçu vierge

angularwebpackangular-cli
18
glandrum101

Tous les fichiers/répertoires de ressources statiques doivent être répertoriés dans le fichier angular-cli.json.

Ajouter des actifs

Pour ajouter vos actifs, vous pouvez soit:

  • Placez votre fichier image dans le dossier par défaut assets (déjà répertorié dans le fichier angular-cli.json.
  • Ou ajoutez un nouveau répertoire à l'intérieur de app/ (par exemple, vous pouvez utiliser app/images, puis référencer cela dans angular-cli.json).

angular-cli.json:

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

Référencement de fichiers

Comme @ jali-ai mentionné dans les commentaires, background-url devrait être background-image et vous pouvez faire référence à votre actif de la manière suivante:

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

Voici un exemple du fichier angular-cli.json et d'une référence à un actif

29
adriancarriger

Cela semble toujours être un problème avec angular-CLI et webpack (avec 1.0.3).

Si vous ajoutez le dossier d'actif au angular-cli.json et définissez le chemin relativement, la construction échouera toujours, sans trouver la ressource url('someRelativeLink').

J'ai utilisé un travail autour et mis toutes les définitions CSS dans:

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

Au lieu d'un fichier styleUrls.

Après avoir fait que tout allait bien.

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