web-dev-qa-db-fra.com

Les images ne se chargent pas Angular 2

Fichier HTML: 

 <div>
      <img  src="New-Google-Logo.png"/>
    </div>

Ici, le fichier New-Google-Logo.png se trouve dans le même dossier que dans le fichier html. Mais après avoir servi, la page html se charge avec d'autres détails, mais pas l'image. Essayé de donner directement un lien vers une image (comme www.google.com/images/x.png), cela fonctionne, mais le fichier local ne se charge pas.

Arbre des dossiers:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - New-Google-Logo.png
              - logincomponent.ts
     -homecomponent
              - homecomponent.html
              - homecomponent.css
              - homecomponent.ts

Ici, New-Google.png est référencé dans logincomponent.html comme indiqué ci-dessus.

Essayez 2:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - Images
                - New-Google-Logo.png
              - logincomponent.ts

Et référé dans le HTML comme:

<div>
      <img  src="./images/New-Google-Logo.png"/>
 </div>

Ces deux n'ont pas fonctionné.

htmlcssangular
5
Amal

Si vous utilisez angular-cli, tous vos actifs statiques doivent être conservés dans le dossier des actifs. Ensuite, vous devriez donner le chemin comme

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

Lorsque vous servez le projet, tous les actifs statiques doivent être servis au client pour pouvoir être affichés sur le client. Angular cli construit et regroupe un projet entier dans des fichiers js. Pour servir vos actifs statiques, vous pouvez suivre deux méthodes. 

  • placez tous vos actifs statiques dans le dossier assets que angular-cli sert avec .angular-cli.json par défaut 

  • ou vous devez entrer le dossier des ressources statiques dans le fichier .angular-cli.json dans un tableau nommé comme ressources, car le dossier des images est dans le dossier statique et le dossier statique est au même niveau hiérarchique 

    "assets": [ "assets", "static/images" ]
17
Prathmesh Dali

Si vous créez un projet à l'aide de la CLI, vous aurez un dossier de ressources. Créez simplement un dossier d'image à l'intérieur et collez toutes vos images à l'intérieur.
reference src = "assets/images/AnyImage.png" dans votre html, les images seront chargées. En fait, vous avez collé vos images dans le dossier loginComponent. Essayez ceci cela fonctionnera.

0
AMIR NEHAL