Certaines images ne s'affichent pas dans Edge

Salut,

Oui, les attributs alt s'affichent très bien à la place des images.

Mes fichiers sont organisés de la façon suivante :

Voici le nom et l'extension des fichiers sont les mêmes que le fichier d'images fournit avec le cours: photo1.jpg, photo2.jpg, photo3.jgp et photo4.jpg

Voici le code html avec le bouton </>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Zozor - Carnets de voyage</title>
    </head>
    
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="images/zozor_logo.png" alt="Logo de Zozor" />
                        <h1>Zozor</h1> 
                    </div>
                    <h2>Carnets de voyage</h2>
                </div>
                
                <nav>
		    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
		</nav>
            </header>
            
            <div id="banniere_image">
                <div id="banniere_description">
			Retour sur mes vacances aux États-Unis...
                    <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, 
			et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi,
			in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien 
			dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis.
			Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc
			posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>

                    	<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum 
				sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a 
				erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet 
				lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. 
				Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut
				bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus 
				aliquam vitae nec diam.</p>

                   	<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. 
				Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique
				senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea 
				dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, 
				vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                </article>
                <aside>
                    	<h1>À PROPOS DE L'AUTEUR</h1>
			<img src="images/bulle.png" alt="" id="fleche_bulle" />
			<p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor"/></p>
			<p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
			<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie
				afin que vous sachiez qui je suis réellement.<p>
			<img src="images/facebook.png" alt="Facebook"/><img src="images/twitter.png" alt="Twitter"/>
			<img src="images/vimeo.png" alt="Vimeo"/><img src="images/flickr.png" alt="Flickr"/>
			<img src="images/rss.png" alt="RSS"/></p>
		</aside>
	</section>

	<footer>
		<div id="tweet">
				<h2>MON DERNIER TWEET</h2>
				<p>Hii haaaaan!</p>
				<p>le 12 mai à 23h12</p>
			</div>

		<div id="mes_photos">
				<h2>MES PHOTOS</h2>
				<p>
					<img src="images/photo1.jpg" alt="Photographie"/>
					<img src="images/photo2.jpg" alt="Photographie"/>
					<img src="images/photo3.jpg" alt="Photographie"/>
					<img src="images/photo4.jpg" alt="Photographie"/>
				</p>
			</div>
			<div id="mes_amis">
				<h2>MES AMIS</h2>
			<div id="liste_amis">
				<ul>
					<li><a href="#">Pupi le lapin</a></li>
                        		<li><a href="#">Mr Baobab</a></li>
                       			<li><a href="#">Kaiwaii</a></li>
                        		<li><a href="#">Perceval.eu</a></li>
                    		</ul>
				<ul>
					<li><a href="#">Belette</a></li>
                        		<li><a href="#">Le concombre masqué</a></li>
                       			<li><a href="#">Ptit prince</a></li>
                        		<li><a href="#">Mr Fran</a></li>
                    		</ul>
			</div>
		</div>
	</footer>
	</div>
	</body>
</html>

et voici le fichier css

/* Feuille de style pour le fichier tp.html */
/* Définition des polices personnalisées */
@font-face
{
	font-family: 'BallparkWeiner';
	src: url('polices/ballpark.eot');
	src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
	     url('polices/ballpark.woff') format('woff'),
	     url('polices/ballpark.tff') format('truetype'),
	     url('polices/ballpark.svg#BallparkWeiner') format('svg');
	font-weight: normal;
	font-style: nomral;
}

@font-face
{
	font-family: 'Dayrom';
	src: url('polices/dayrom.eot');
	src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
	     url('polices/dayrom.woff') format('woff'),
	     url('polices/dayrom.tff') format('truetype'),
	     url('polices/dayrom.svg#Dayrom') format('svg');
	font-weight: normal;
	font-style: nomral;
}
/* Définition de l'arrière-plan, de la police et de la couleur du text */
body 
{
	background: url(images/fond_jaune.png);
	font-family: 'Trebuchet MS', Arial, sans-serif;
	color: #181818;
}
/* Avec #bloc_page, le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixel de large. 
   Avec les marges automatiques, le design sera centré. */
#bloc_page
{
	width: 950px;
	margin: auto;
}
section h1, footer h1, nav a
{
	font-family: Dayrom, serif;
	font-weight: normal;
	text-transform: uppercase;
}
/* Définition du header */
header
{
	background: url('images/separateur.png') repeat-x bottom; 
	display: flex; /* Place les éléments un à côté de l'autre */
	justifiy-content: space-between;
	align-item: flex-end;
}
#titre_principal
{
	display: flex; /* Ces deux lignes séparent davantage le titre h1 et le titre h2 */
	flex-direction: column;
}
#logo /* Ces trois lignes place le titre ZOZOR à côté du logo Z */
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
}
#logo img
{
	width: 59px;
	height: 60px;
}
header h1
{
	font-family: 'BallparWeiner', serif;
	font-size: 2.5em;
	font-weight: normal;
	margin: 0 0 0 10px;
}
header h2 /* Réduit l'écart entre le logo z, zozor et carnets de voyage */
{
	font-family: Dayrom, serif;
	font-size: 1.1em;
	margin-top: 0 px;
	font-weight: normal;
}
nav /* Permet de déplacer ma liste complètement vers la droite et de la mettre au bas du header */
{
	margin-top: 65px;
	width: 1200px;
	text-align: right;
	display: inline-block;
}
nav ul /* Enlève les puces devant la liste */
{
	list-style-type: none;
}
nav li /* Laisse 15px d'espace entre chaque mot de la liste */
{
	display: inline-block;		
	margin-right: 15px;
}
nav a
{
	font-size: 1.3em;
	color: #181818;
	padding-bottom: 3px;
	text-decoration: none;
}
nav a:hover /* Quand la souris passe au-dessus des mots, ceux-ci changent de couleur et sont soulignés.*/
{
	color: #760001;
	border-bottom: 3px solid #760001;
}
#banniere_image
{
	margin-top: 15px;
	height: 200px;
	border-radius: 5px;
	background: url('images/sanfrancisco.jpg') no-repeat;
	position: relative;
	box-shadow: 4px 4px 4px 8px brown;
	margin-bottom: 25px;
}
#banniere_description
{
	position: absolute;
	bottom: 0;
	border-radius: 0px 0px 5px 5px;
	width: 99.5%;
	height: 33 px;
	padding-top: 15px;
	padding-left: 4px;
	background-color: rgba(24,24,24,0.8);
	color: white;
	font-size: 0.8em;	
}
.bouton_rouge
{
	height: 20px;
	position: absolute;
	bottom: 0px;
	right: 5px;
	background: url('images/fond_degraderouge.png') repeat-x;
	border: 1px solide #760001;
	border-radius: 5px;
	font-size: 1.2em;
	text-align: right;
	color: white;
	text-decoration: none;
}
.bouton_rouge img
{
	border: 0;
}
section
{
	display: flex;
	margin-bottom: 20px;
}
article, aside
{
	font-size: 1.1em;
	text-align: left;
}
article
{
	margin-right: 20px;
	flex: 3;
}
.ico_categorie
{
	vertical-align: top;
	margin-right: 30px;
}
article p
{
	font-size: 0.9em;
}
aside
{
	position: relative;
	width: 235px;
	height: 375px;
	background-color: #706b64;
	box-shadow: 5px 5px 5px #1c1a19;
	border-radius: 10px;
	padding: 10px;
	color: white;
	font-size:0.9em;
}
#fleche_bulle
{
	position: absolute;
	top: 175px;
	left: -12px;
}
#photo_zozor
{
	text-align: center;
}
#photo_zozor img
{
	border: 1px solid #181818;
}
aside img
{
	margin-right: 3px;
}
footer /* La commande display flex permet de placer tous les éléments un côté de l'autre dans le pied de page.*/
{
	display: flex;
	background: url('tp/images/ico_top.png') no-repeat top center, url('tp/images/separateur.png') repeat-x top, 
		    url('tp/images/ombre.png') repeat-x top; 
	padding-top: 25px;
}

footer p, footer ul
{
	font-size: 0.8em;
}

footer h1
{
	font-size: 1.1em;
}


#tweet
{
	width: 35%;
}

#mes_photos
{
	width: 40%;
}

#mes_amis
{
	width: 31%;
}
#mes_photos img
{
	border: 1px solid #181818;
	margin-right: 2px;
}

#liste_amis
{
	display: flex;
	justify-content: space-between;
	margin-top: 0;
}
#mes_amis ul
{
	list-style-image: url('images/ico_liensexterne.png');
	padding-left: 2px;
}

#mes_amis a
{
	text-decoration: none;
	color: #760001;

Merci beaucoup de prendre le temps de m'aider.

previld

11 février 2018 à 22:13:30

Bonjour,

Toutes les images s'affichent dans Chrome. Cependant, lorsque que je vais dans Edge ou Internet Explorer, toutes les images s'affichent sauf les photos dans la section « Mes photos ».Je fais mes premiers dans la programmation html. Merci de m'aider.

Daniel

Voici mon code html pour la section «Mes photos »:

<footer>
  <div id="tweet">
    <h2>MON DERNIER TWEET</h2>
    <p>Hii haaaaan!</p>
    <p>le 12 mai à 23h12</p>
   </div>

  <div id="mes_photos">
    <h2>MES PHOTOS</h2>
    <p>
     <img src="images/photo1.jpg" alt="Photographie"/>
     <img src="images/photo2.jpg" alt="Photographie"/>
     <img src="images/photo3.jpg" alt="Photographie"/>
     <img src="images/photo4.jpg" alt="Photographie"/>
    </p>
   </div>
   <div id="mes_amis">
    <h2>MES AMIS</h2>
   <div id="liste_amis">
    <ul>
     <li><a href="#">Pupi le lapin</a></li>
                          <li><a href="#">Mr Baobab</a></li>
                          <li><a href="#">Kaiwaii</a></li>
                          <li><a href="#">Perceval.eu</a></li>
                      </ul>
    <ul>
     <li><a href="#">Belette</a></li>
                          <li><a href="#">Le concombre masqué</a></li>
                          <li><a href="#">Ptit prince</a></li>
                          <li><a href="#">Mr Fran</a></li>
                      </ul>
   </div>
  </div>
</footer>
</div>
</body>
</html>