html - les Images ne s'affiche pas sur Heroku?

J'ai déployé mon HTML statique du site web de la société Heroku à l'aide de ce tutoriel (http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/) et mes images ne s'affichent pas ? Il fonctionne parfaitement en local, donc je ne comprends vraiment pas pourquoi il ne fonctionne pas lorsqu'il est déployé sur Heroku ?

J'ai aussi regardé toutes les autres solutions que stackoverflow a à offrir, et rien n'a fonctionné pour moi. Toute aide est très apprécié

Voici l'ordre de mes dossiers/fichiers (dossiers sont capitalisés): 

-RESUMEAPPCOPY
  -home.html
  -portfolio.html
  -index.php
  -aboutme.html
-PUBLIC
  -IMG
  -JS
  -CSS

Code pour l'image: 

 <img src="/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

Chaque fois que je inspecter l'élément sur Heroku, il dit : 

Failed to load resource: the server responded with a status of 404 (Not Found)

et où l'image est censée être j'ai le typique cassé lien de l'image image

  • 404 indique que le fichier n'est pas là où vous l'attendez.
InformationsquelleAutor Erv Noel | 2013-07-29
  1. 5

    Votre <img> balise est pointant vers une absolue chemin qui existe sur votre système de fichiers local, mais n'existe pas pour votre Heroku app. Au lieu de cela, fournir un relative chemin d'accès (par rapport à le fichier HTML de l'invocation de la <img> tag, qui est à votre image de l'actif, engageons le changement de contrôle de version, puis redéployer à Heroku.

    En supposant que votre public répertoire est en fait imbriquées à l'intérieur des resumeappcopy répertoire, le chemin d'accès suivant devrait fonctionner:

    <img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

    Mise à JOUR:

    Noter que la cité de l'actif URL pointe vers un atout avec l'extension de fichier PNG en majuscules. Toutefois, le fichier est réelle extension de fichier est png – en minuscules (voir ici). Votre système de fichiers local est probablement insensible à la casse lors de la recherche d'une ressource – mais Heroku ne l'est pas. Vous devez vous assurer que vous êtes correctement en invoquant le bon boîtier pour les ressources lorsque vous déployez à Heroku.

    • Je l'ai fait et maintenant, l'image ne s'affiche pas localement. Je ne comprends pas pourquoi il ne s'affiche pas parce que je sais que c'est dans le dossier...
    • Pouvez-vous confirmer la structure de répertoire de votre application? Est le public dossier situé à dans le resumeappcopy répertoire, ou regard - il?
    • Oui le dossier public est situé dans le répertoire resumeappcopy
    • En supposant que votre application est en effet statique (et le <img> balise est située quelque part dans un fichier directement imbriquée à l'intérieur de la resumeappcopy répertoire), vous pouvez supprimer le précéder d'une barre oblique à partir de l'actif du chemin à prendre le chemin de l'image valable sur votre système de fichiers local et Heroku. Voir ma mise à jour.
    • attendez, j'ai tout compris. Ce que vous avez dit était juste, quand je l'ai testé, j'ai eu /public/img/.. au lieu de public/img/... ce qui explique pourquoi il ne fonctionnait pas sur place avant de. MERCI!!!!!!
    • bizarre, j'ai tout fait mais les images ne sont toujours pas en montrant ? des conseils à donner ?
    • Encore ne s'affichent pas sur Heroku? Le fichier est votre <img> balise située dans?
    • J'ai 3 images dans ma portfolio.html fichier et deux de plus dans ma aboutme.html fichier
    • Êtes-vous à l'aise de partager le lien de votre application de sorte que nous pouvons diagnostiquer?
    • Heroku ressource recherches sont sensibles à la casse; votre chemin boîtier est incorrect, et donc vous obtenez une erreur 404. Changer PNG à png devrait résoudre ce problème. Voir ma mise à jour pour une explication.
    • Vous êtes un sauveteur ! Mon site fonctionne enfin, je vous remercie beaucoup !

    InformationsquelleAutor zeantsoi
  2. 3

    Vous donner un chemin absolu de l'image:

    /Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG

    L'image fonctionne en local, mais à cause de ce répertoire existe sur votre machine locale; il n'existe pas sur Heroku.

    Vous devez utiliser un chemin relatif au répertoire servi par Heroku /de votre serveur:

    /../PUBLIC/img/PennUnitedWebsite.PNG
    (cela suppose que le lien existe dans un fichier HTML dans le RESUMEAPPCOPY répertoire)

    InformationsquelleAutor Nick Tomlin
  3. 1

    La seule réponse qui frappe le droit clou sur la tête: Heroku est sensible à la casse!

    M'a pris une demi-journée pour comprendre ça!

    InformationsquelleAutor Ad Rienks
  4. 0

    J'ai eu le même problème et a trouvé le problème de la capitalisation type de fichier ('.PNG'). Je crois que Heroku est à la recherche pour les fichiers sans .toLowerCase() la fonction appliquée. Ce qui signifie que vous devez demander une correspondance exacte entre votre marge et votre fichier avec une capitalisation importante.

    Ce n'était pas un problème sur mon nœud local /express serveur, mais est devenu un problème après le déploiement d'Heroku. Certaines de mes images ont été à apparaître, mais d'autres étaient avoir des erreurs 404 (c'est à dire ceux avec capitalisés types de fichiers). La chose la plus intelligente à faire est de toujours faire vos types de fichiers sont en minuscules.

    J'ai changé cela:

    <img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

    À ceci:

    <img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

    J'espère que cela aide quelqu'un qui est venu sur cette question, car elle me confond pendant au moins une heure. Bonne chance!

    InformationsquelleAutor CBP
  5. 0

    Bien , à chaque fois que votre page Web contenant du code HTML, CSS et JavaScript , afin d'en suivre 2 étapes :

    1) Faire un fichier donner le nom que index.html (gardez tout est bien dans celui-ci) ex:script,feuille de style & corps.

    2) Maintenant, la modification de ces fichiers, de copier et de coller ces mêmes fichiers mais le changement de domaine d'index.php

    De la déployer sur un Heroku , Gardez vos images téléchargées dans un dossier avec index.html

    Ainsi, cette méthode va vous aider à déployer vos Pages Web

    InformationsquelleAutor Aamir M Meman
  6. 0

    En résumé, pour bien charger les images:

    1) Utilisation d'url relatives chemin relatif index.html

    2) extension de fichier d'image doit être en png au lieu de jpg, et de l'écrire en minuscule, par exemple: "chat.png"

    InformationsquelleAutor Lucy Su
  7. -1

    J'ai eu le même problème récemment sur Windows OS. Images chargées correctement lorsqu'il est testé en local, mais sur heroku certaines des photos ont été chargement, tandis que d'autres où pas. Et les photos ont été dans le même dossier! Mes chemins et de script ont été corrects, mais comme d'autres l'ont mentionné, il a été un casse problème. J'ai renommé les fichiers téléchargés à nouveau, mais il n'a pas aidé. Pourquoi? Parce que changer la casse des lettres n'est pas reconnu comme un réel changement pour git sur windows. Pour charger correctement nouvellement nommé des fichiers j'ai fait ces étapes (toutes les commandes peuvent être trouvés à heroku tutoriel pages):

    1. Détruire heroku application et de faire une nouvelle
    2. Supprimer .git dossier à partir de votre répertoire
    3. Créer de nouveaux git remote pour votre application
    4. Pousser tous vos fichiers

    De cette façon, heroku les fichiers ont des noms de fichiers comme vous le souhaitez. A travaillé pour moi.

    • Vous devez utiliser les commentaires pour ajouter de la précision de la réponse. Commentaire de la accepté de répondre à détail le cas de Git et Windows.
    • il ne peut pas commenter.
    InformationsquelleAutor Jan Stefaniak