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 ...
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
It works when I put an unsplash link inside
srcsethow about adding a
. at the start
if unsplash link works then your local path must be incorrectNo, 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 ... 😕does the src path work ?
nope, only with unsplash.
check in dev tools the path for the image and see where it goes
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 ... 🤨because the path is correct
also having spaces in file/directory names is asking for troubles
Still a bit odd, but hey, now it's working at least.
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 😄Yes! That works!
So the lesson is not to copy path ...
so it probably was the spaces in directory names
/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-mobile.jpg"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.