Images not loading in picture element

This is hard to show since my images are stored locally, and so I can't get them up to codepen. But this is what I've coded, and no images are showing ...
<picture class="image">
<source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-desktop.jpg" media="(orientation: portrait)">
<source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg" media="(orientation: landscape)">
<img src="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg" alt="">

</picture>
<picture class="image">
<source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-desktop.jpg" media="(orientation: portrait)">
<source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg" media="(orientation: landscape)">
<img src="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg" alt="">

</picture>
In vscode I just right clicked and copied path, and the images is in a map called images, inside the main map where the index.html resides.
13 Replies
Å Marlon G
Å Marlon G2y ago
It works when I put an unsplash link inside srcset
Mannix
Mannix2y ago
how about adding a . at the start if unsplash link works then your local path must be incorrect
Å Marlon G
Å Marlon G2y ago
No, not working with a . I don't understand how the local path can be wrong when I just right click and copy the path in vscode ... 😕
Mannix
Mannix2y ago
does the src path work ?
Å Marlon G
Å Marlon G2y ago
nope, only with unsplash.
Mannix
Mannix2y ago
check in dev tools the path for the image and see where it goes
Å Marlon G
Å Marlon G2y ago
It says that image can not be loaded. But I got it to work now: I moved the images into the same folder as the index.html, and put just the image name, not the whole path in the srcset. Now it works, for some reason ... 🤨
Mannix
Mannix2y ago
because the path is correct also having spaces in file/directory names is asking for troubles
Å Marlon G
Å Marlon G2y ago
Still a bit odd, but hey, now it's working at least.
Mannix
Mannix2y ago
try creating imgs directory where your index.html is and then for src path use "./imgs/image_name.jpg" put the images in that directory of course 😄
Å Marlon G
Å Marlon G2y ago
Yes! That works! So the lesson is not to copy path ...
Mannix
Mannix2y ago
so it probably was the spaces in directory names /Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg"
Å Marlon G
Å Marlon G2y ago
Aha, I see. Anyway the main take away is that you don't actually need the whole path, just the step closest to the index file. ... or it's safer, at least.
Want results from more Discord servers?
Add your server