Mes images ne s'affichent pas

**Flash30** · 03/04/2023, 16h25

Bonjour,

Sachant que je débute avec le logiciel Visual Code Studio, je crée un site web, j'ai un blocage au niveau des images qui ne s'affichent pas pourtant le lien est bien précis, besoin d'aide pour ce cas-là :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A320.jpg" alt>
</li>
<li class=img2>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A330.jpg" alt>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
*,
*::after
*::before {
box-sizing: border-box;
}
 
.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

Merci pour votre aide,

Flash30

**laurentSc** · 03/04/2023, 17h00

Bonjour,
bienvenu chez DVP

1- merci de mettre en forme ton message avec le bouton pour le code (#) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!-- du code html -->

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

/* du code CSS */

2- Ce code sort à mon avis d'un tuto ; peux tu en donner le lien ?

3- Visual Studio Code (VSC) est un EDI comme un autre.

**Flash30** · 03/04/2023, 17h09

Bonjour @laurentSC,

J'ai bien noté :

en HTML =>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html> 
	<html lang="fr" > 
 
<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="binou.css">
		<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A320.jpg" alt>
</li>
<li class=img2>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A330.jpg" alt>
</li>
<li class=img3>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A340.jpg" alt>
</li>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>
</html>

en CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
body {
  background-color:#E4E4E2;
}
 
*,
*::after
*::before {
box-sizing: border-box;
}
 
.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

En effet, j'avais oublié de fermer en </html> en page HTML mais les images ne s'affichent toujours pas.

Y a peut-être autre chose que j'aurais ajouté ou à supprimer ? Je suis preneuse.

Merci à vous @LaurentSC

Flash30.

**gesualda** · 04/04/2023, 07h43

Bonjour Flash30

Sans certitude, mais je crois savoir que les liens et titres n'aiment pas les espaces dans les noms de dossier et/ou de fichiers, Je t'ai mis en rouge les espaces. :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

C:\Users\M409535\Desktop\Portfolio Visual_Code\Illustration 2D\Autocollant_AF\Air_France-A320.jpg

Donc essaye de construire un "dossier, sous dossier et nom de fichier sans espace. Tu peux utiliser " _ " pour les dossiers et/ou pour les fichiers " - ". Je pense que tu aura d'autres conseils des intervenants !

Autre point : un peu de lecture pour les différentes façon de présenter un lien dans un site =>
https://www.b-website.com/chemins-absolus-relatifs/

Bon courage

**laurentSc** · 04/04/2023, 09h01

Envoyé par gesualda

les liens et titres n'aiment pas les espaces dans les noms de dossier et/ou de fichiers

Je le confirme

**Flash30** · 04/04/2023, 13h52

@gesualda, @LaurentSC,

Merci pour vos retours, je vais tester.

Je vous dirai, et un grand merci pour les liens, je comprends parfaitement.

Flash30.

Mes images ne s'affichent pas

CSS

Vue hybride

Discussions similaires

Partager

Partager