Adding images into HTML with VSCODE

Hey all,

I’m trying to build my own photo gallery using VSCODE. I’m having trouble adding images from my desktop to display in html.

Here’s my code (the part with the photo)

CSS Grid Gallery

<div class="gallery-container">
    <div class="image">
        <img src="/Users/patflanagan/Desktop/HTML Images/DSC08558-Edit.jpg" alt="Chrysler">
    <div class="text">Cityscape</div>

When I open live preview, just the image icon and file name appear (see screenshot)

When I click on the file name there, the image does actually appear in a separate tab.

Any help here would be greatly appreciated! I’m really excite to build my photo gallery!

the problem is this space which is in your folder name

spaces are not allowed in URLS so try to replace that space with %20


Hmmm That makes perfect sense but it’s still not functioning the way it should as an image. I’ll keep playing around with it.

is it still behaving exactly as before? (you still see the folder with the image listed as you showed earlier?)

It’s actually just a little photo icon now. No file name

oh - does it look broken? (the little square?)
It may mean that the path is broken (the file location doesn’t contain an image)

Try to copy the path into the browser. file:/Users/patflanagan/Desktop/HTML %20Images/DSC08558-Edit.jpg and play with it till it works and you will have the correct path
(for eg. you may need to give the full path like this:
file:///C:/Users/patflanagan/Desktop/HTML %20Images/DSC08558-Edit.jpg)

Yeah now when I copy the path into the browser the image is displayed fine. I have to be missing some small detail. I’ll continue to tweak it around