Bonjour, 

Je suis en train d'apprendre à créer mon site avec HTML mais mes images n'apparaissent pas ! Vous voyez, je crois que le site sait qu'il y en a mais on ne les voit pas… Je ne comprends pas ce qui ne va pas sur mon code. Vous pouvez m'aider ?

Noémie

<p>
<img src="Visual studio code/instagram.png" alt="Logo Robbie Lens"/>
</p>

Le HTML est bien formé. Le texte affiché, attribut de la propriété alt signifie que l'image n'a pas été trouvée dans le dossier indiqué.

Telle que tu l'as déclarée, ton image est censée être dan le dossier nommé Visual studio code qui lui-même se trouve dans le dossier dans lequel est la page (fichier HTML) courante. Est-ce bien le cas ?

P.S. Evite pour le web les dossier comprenant des espaces et autre caractères dit spéciaux (autres que l'alphabet "anglais", les tirets  et les chiffres).

Bonjour,

+1 Pour Domi65, je suis du même avis.

Cependant je conseillerais plutôt de nommer le répertoire qui contient les images "images". C'est plus simple car pas d'espace dans le nom, et il est descriptif de ce qu'il contient. (Tout comme vous appellerez "css" le répertoire contenant les feuilles de styles et "js" le répertoire contenant les fichiers JavaScript)

PS : c'est  accueil pas acceuil

PS2: le contenu du texte alternatif (attribut alt) doit être une description textuelle de l'image. instagram.png ne représente certainement pas le logo de Robbie Lens

Merci ! Pour toutes vos réponses !

Du coup, j'ai fais ce que vous m'avez conseillé. Per contre, ça ne marche toujours pas…

Je vous montre.

Encore merci... Vous saurez m'aider ?

Noémie

Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code </>

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

---

Bonjour, je comprends. Vous utilisez un chemin relatif, si vous choisissez cela vous devez indiquer un chemin relatif au document qui appel le fichier image. 

Dans la hiérarchie de fichier, au départ du fichier appelant (ici le fichier .html) quel chemin parcourez-vous pour arriver à l'image.Pour remonter dans un répertoire parent c'est ../

Dans le cas d'un chemin absolu par rapport à la racine du site web, vous devez indiquer un slash (/) en premier caractère du chemin pour indiquer que vous souhaitez démarrer de la racine du site. 

PS : Dans l'explorateur de fichier afficher les extensions de fichier, cela vous épargnera de soucis de liaisons de fichier. =>  https://www.pcastuces.com/pratique/astuces/6474.htm 

-
Edité par AbcAbc6 21 septembre 2024 à 11:05:25

Merci ! 

Euh… Je n'ai tout compris à ce que vous m'avez expliqué (je suis une grande débutante...) mais merci !

Ca ne marche pas… J'ai tout essayé… 

Il n'y a rien d'autre à faire ? Ce n'est pas le navigateur (chrome) ou quelque chose d'autre ?

Bonne journée

-

Bonjour, que n'avez vous pas compris?

Au départ du fichier accueil.html en lien relatif :

<img src="../../images/image.png" alt="">

Lien absolut par rapport à la racine du site :

<img src="/fichier_html/images/image.png" alt="">

visual_studio_code est le répertoire racine de votre site. Vous ne devez pas indiquer ce répertoire dans vos liens. Je trouves que vous vous compliquer la vie. Voici un hiérarchie de répertoire que je recommande : 

/ (racine du site qui peut s'appeler site-web)

/index.html (la page d’accueil du site) 

/contact.html (la page de contact)

/images/ (le répertoire images contenant toutes les images du site)

/images/instagram.png (une image)

/images/logo.png (le logo)

/css/ (le répertoire contenant la ou les feuilles de styles)

/css/styles.css (le fichier de style)

/js/ (le répertoire contenant les fichiers JavaScript )

/js/main.js (le fichiers principale en JavaScript) 

Quand vous serez à l'aise avec cette hiérarchie simple de fichier vous pourrez complexifier. 

Bonjour,

Reprenons les bases de ce qui est expliqué dans le cours : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/1604646-creez-un-lien-hypertexte-en-html#/id/r-8030505

Voir en particulier le cas 2 qui est le cas où les deux fichiers sont dans des dossiers différents : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/1604646-creez-un-lien-hypertexte-en-html#/id/r-8030504

Dans ton fichier HTML tu écris : 

<p>
  <img src="visual_studio_code/instagram.png" alt="Logo Robbie Lens"/>
</p>

Cela revient à dire au navigateur de regarder dans le dossier où se trouve ton fichier HTML, y chercher un dossier nommé "visual_studio_code", à entrer dans ce dernier pour y trouver une image nommée "instagram.png".

Le navigateur fait donc exactement ce que tu lui demandes, ne trouve pas ce fichier et te renvoie une erreur 404.

Ce qui pose problème c'est que ce que tu demandes au navigateur ne correspond pas à ta hiérarchie de fichiers.

Toi tu dois dire à ton navigateur : remonte dans le dossier "fichier_html", dans ce dernier cherche un dossier nommé "images" pour y trouver une image nommée "instagram.png"(à adapter selon ton architecture de dossiers et de fichiers que j'ai un peu de mal à voir en zoomant sur tes images).

Ton code devrait donc ressembler à :

<p>
  <img src="../images/instagram.png" alt="Logo Robbie Lens"/>
</p>

Merci baucoup pour vos messages mais j'essaie de pleins de manières différentes et les images ne s'affichent toujours pas !! J'ai appliqué vos conseilles mais ça ne marche pas ! Je ne sais plus quoi faire mais merci en tous cas

Noémie

Bonjour Noémie, télécharger ce projet d'exemple => https://we.tl/t-FjKxK110Y3 (disponible 7 jours)

Vous aurez un exemple d'insertion d'image dans la page d’accueil, dans un page se situant dans un répertoire. Et un exemple d'image décorative insérée en CSS.

  Si vous n'arrivez pas à reproduire ou comprendre cet exemple, je ne peux rien de plus pour vous

Merci beaucoup ! J'espère y arriver ! 

Aucun problème... Je penses que c'est moi... Je vais y arriver !

encore merci pour tous vos conseils !

aurevoir

Noémie

Bonsoir, ce sont bien les images du projet du cours HTML/CSS que vous voulez utiliser?

Si non, il me vient une idée si vous avez renommé les images, il est possible que vous aillez donné une extension en plus de l’extension existante. Ex image.png.png

  Cela se produit si vous n'avez pas les extensions affichées dans l'explorateur de fichier. Vérifier qu'elle soit bien affichées => https://www.pcastuces.com/pratique/astuces/4584.htm

-
Edité par AbcAbc6 30 septembre 2024 à 19:28:46

Hello,

Bien penser au cache aussi, le cauchemar des développeurs...CTRL + MAJ + R pour raffraichir la page et effacer le cache il me semble

Hello,                                                        Essaies  cette méthode : <figure> <im src=">  </figure . La balise img n’est pas censé est la l’intérieur des balises p  ,qui sont uniquement pour le paragraphe. Bon je suis encore débutant.

-
Edité par KeiKarton 4 octobre 2024 à 1:47:22