Angulaire 4 affichage des images

Je suis en train d'ajouter une image angulaire 4 ... mais sans succès

Mes dossiers :

src

- app
    - job
        job.component.css
        job.component.html
        job.component.specs.ts
        job.component.ts

- assets
    - images
        play-3.png

favicon.ico

Ce que j'ai essayé :

 <a href="ta_page" ><img src="../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="../../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="../../../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="assets\images\play-3.png"/></a>
 <a href="ta_page" ><img src="images/play-3.png"/></a>
 <a href="ta_page" ><img src="favicon.ico"/></a>
 <a href="ta_page" ><img src="./play-3.png"/></a>
 <a href="ta_page" ><img src="app/assets/images/play-3.png"/></a>              
 <img ng-src="assets/images/play-3.png">
 <img ng-src="images/play-3.png">

d'erreur : 

Ne peut pas OBTENIR /jouer-3.png

Si je mets de favicon cela fonctionne ....

J'ai essayé de mettre mes images dans /src src/actifs, src/assets/images ...

Edit :

mon .angulaire de la cli.json

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

Solution :
- Redémarrer ng servir après pgn télécharger

  • src="assets/images/jouer-3.png" celui-ci est peut-être à travailler correctement. Vous essayez ce buggy wayin vous balise img
  • nouvel essai, <img src="assets/images/jouer-3.png"> ne fonctionne pas , erreur : <pre>Ne peut pas OBTENIR /assets/images/jouer-3.png</pre>
  • avez-vous de donner tout à la hauteur de la valeur pour l'img
  • Pour référencer mon .angulaire de la cli.fichier json a: "actifs": [ "actifs", "jeu-3.png" ],
  • Je tryied avec 3 différentes images et la taille (32x32 comme favicon etc) (si je mets par exemple static.pexels.com/photos/34950/pexels-photo.jpg cela fonctionne)
  • ne fonctionne pas avec angulaires-cli modification
  • selon la base de balise spécification de L'URL de base pour être utilisé dans l'ensemble du document relatif des adresses URL. Si cet attribut est spécifié, cet élément doit passer avant les autres éléments avec des attributs dont les valeurs sont des Url. Relative et absolue de l'Url sont interdits.
  • dans angulaires-cli projets de la base href s'agit de "/" (.html) donc tous les chemins, y compris les url dans le css, et notamment relative et absolue des chemins, devraient avoir / ajoutée. Au lieu de cela, les chemins d'accès relatifs avoir './' La solution d'ajouter manuellement '/' pour les chemins d'accès absolus n'est pas assez bon, puisque les différents environnements de serveurs sur différents builds peuvent différer dans la "base" de l'url. Je suppose que c'est un chargeur de problème. Pas sûr de savoir comment il joue avec le reste de la configuration, mais raw-chargeur suit cette spécification parfaitement.
  • Avez-vous redémarré ng servir après l'ajout de l'image png?
  • non, je n'ai pas redémarrer ng servir, j'ai vérifié mon code sur un autre ordinateur, les 9 premières lignes de travail !!! Peut-être ng servir doit être redémarré pour le travail, je vais tester ce mardi, avec l'ordinateur principal.... Merci
  • il fonctionne après le premier lancer ... je devrais peut-être redémarrer ng servir ..

InformationsquelleAutor Mohammed | 2017-12-22
  1. 2

    Angulaire-cli.json, vous devriez avoir ceci:

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

    actifs est le dossier pour les fichiers statiques, ok,maintenant que vous avez à mettre les images dans un dossier dans les actifs /src/assets/images/jouer-3.png, enfin, vous pouvez accéder à l'image, de vous app.component.html avec:

    <img src="/images/play-3.png"/></a>
    • Je pub mon angulaires-cli, j'ai la même choses, de nouvelles essayez même erreur
    InformationsquelleAutor Enrique Rubio Sanchez
  2. 0

    avec votre structure de dossier src/assets/images où vos images sont dans le dossier images, cela devrait fonctionner:

    Tant que vous avez cette déclaration dans votre angulaires-cli.json

    "apps": [
    {
    "racine": "src",
    "outDir": "dist",
    les "actifs": [
    les "actifs",
    "favicon.ico"
    ]

    InformationsquelleAutor Boago