5568 sujets

Sémantique web et HTML

Optimisation et srcset

Bonjour,
Mon image ne s'affiche plus avec ce code faisant appel à srcset Smiley hum 
<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w,
   alt="mannequin" />

Les chemins sont bons...

Autres questions, comment utiliser srcset dans ces cas de figure ?

		<div id="iiSlider">
			<img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="" alt="Slide 1" />            
			<img data-src="./imgs/2364@2x.jpg" data-src-2x="./imgs/2364jpg" src="" alt="Slide 2" />   
            <img data-src="./imgs/IMG_6150@2x.JPG" data-src-2x="./imgs/IMG_6150.JPG" src="" alt="Slide 3" />         
			<img data-src="./imgs/DSC_2813@2x.jpg" data-src-2x="./imgs/DSC_2813.jpg" src="" alt="Slide 4" />


et
							<div class="grid__item" data-size="1023x1536">
							<a href="./imgs/pds_1@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_1.jpg" alt="Marcus Miller" />
							<div class="description description--grid"> <h1><strong>Marcus Miller</strong></h1><h2>Palais des Sports, Paris. 5 juillet 1994</h2></div>
							</a>
							</div>

Quelqu'un pourrait-il m'aider ?
Merci,
ED

Modifié par el_debutanti (04 Mar 2022 - 11:02)
Bonjour Olivier,
MERCI BEAUCOUP !!!!
Mais je ne vois pas trop comment l'adapter Smiley murf
C'est tout nouveau pour moi srcset...
J'ai pourtant été voir les liens en parlant, et ton exemple est PARFAIT mais je rame !
Encore merci,
ED
Il n'y a pas de secret : il faut manipuler du code.

Tu peux partir de l'exemple que je t'ai donné et jouer avec les paths pour voir si tes propres images s'affichent par exemple. C'est un bon début.

Pour aller plus loin il faut lire la documentation MDN. Mozilla Developer Network est une référence pour tout ce qui concerne le front : HTML, CSS et JS. En pratique, lorsque tu cherches les propriétés d'une fonction - CSS par exemple -, après avoir copié le nom de la fonction dans ton moteur de recherche préféré, tu rajoutes "mdn" avant de lancer ta recherche.
Il manque un guillemet de fermeture à 
srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w,


data-src-2x
ça n'existe pas en soi ; data-src ça sert, je présume, à remplacer ensuite src via javascript. Donc il faut voir du coté du JS.
Bonjour kerlutinoec,
Mon code devrait-il ressembler à ça ?
<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w"
      ./imgs/768w/dmitri.jpg 768w"
      ./imgs/960w/dmitri.jpg 960w"
   alt="mannequin" />

Merci beaucoup,
ED
Non cette fois il y a des guillemets en trop !

<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w"
   alt="mannequin" />


Quand tu ouvres des guillemets, tu dois les refermer (à la fin de l'expression à mettre entre guillemets), toujours par paire (=2) : ouvrant/fermant. (Pas au pif)
Modifié par kerlutinoec (04 Mar 2022 - 16:34)
Si tu enlèves la partie srcset tu as une image ??
Je soupçonne que le chemin avec un point ça ne le fasse pas
Bonjour kerlutinoec,
Oui, sans la partie srcset, l'image s'affiche bien !
Je ne vois pas ce qui peut clocher dans le code ?
Merci pour ton aide Smiley cligne
E.
Et encore merci Olivier C,
Mais j'ai du mal à comprendre ton codepen Smiley rolleyes
Donc tu mal à l'adapter Smiley hum
Bonne journée,
ED
Sujet clos
Aller à