web-dev-qa-db-fra.com

Angular 6 Ne pas charger les images à partir d’actifs

Pour une raison quelconque, je ne parviens pas à afficher mes images dans mon application . Voici l'erreur, les tests et la classe: 

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

Une idée pourquoi cela ne fonctionne pas? Mon image.png se trouve dans le dossier "assets", situé à l'adresse src/assets/image.png.

Mettre à jour:

Nous avons donc fait un test. Nous avons copié tous les modules de noeuds et les fichiers de projet sur un autre PC et les images ont été chargées correctement. Donc, je suppose que le problème se situe en dehors du projet angulaire.

htmlangularimagehttp-status-code-404assets
3
Frank

Le problème est donc que le projet angulaire était situé à un endroit où il causait une erreur. Dans mon cas, il se trouvait dans un référentiel de bitbucket. Je ne suis cependant pas sûr que ce soit la raison de l'erreur.

Essayez de déplacer le projet angulaire entier vers un emplacement différent. Cela l'a résolu pour moi :)

La solution de @ Rak2018 est une bonne solution de contournement si vous souhaitez l'utiliser à la place.

1
Frank

Essayez ce <img class="logo" src="./assets/image.png">

faites également un clic droit sur votre image et vérifiez si l'extension est PNG au lieu de png, le cas échéant, écrivez image.PNG.

1
Alen

src="assets/image.png" devrait fonctionner sans problème. Avez-vous redémarré votre build depuis que vous avez ajouté dans l'image?

1
Anthony DiTomasso

Essaye ça:

<div class="logo"></div>

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
    background:url('assets/image.png') no-repeat center center;
}
1
Rak2018
<img class="logo" src="assets/image.png">

C'est le bon chemin, probablement quelque chose d'autre a mal tourné.

vérifiez que le nom de l'image ou son jpeg. Peut-être avez-vous ajouté un nouveau dossier dans le dossier des actifs? , comme les images si le code devrait ressembler à ceci 

<img class="logo" src="assets/image/image.png">
1
Matan Shushan

J'ai eu le même problème, je viens de le résoudre… .. Essayez d'accéder à partir du répertoire "src", comme ci-dessous:.

0
user135740

c'est parce que vous n'avez pas la permission d'accéder au fichier.

Manière simple dans Windows Déplacez votre projet du lecteur C: vers un autre lecteur. ça marche bien.

Bonne chance.

0
Ali Safari

J'ai eu le même problème, cela s'est avéré être un problème sensible à la casse sur le chemin.

Dans mon cas, le dossier d’image sous actifs était en majuscule I sur le dossier d’image. /assets/Images/angularconnect-shield.png

alors vérifiez votre chemin d’image et assurez-vous qu’il correspond exactement à.

0
Maddy

J'ai eu le même problème aussi. et pour moi était d'ajouter un '/' avant le répertoire assests:

0
Aharon Ohayon