Browser can't locate images from my desktop

Hi all, I’m having difficulties trying to get an image from my desktop to show up on my webpage. Im using “Textedit”. Not sure what to do here. The image is located in a subfolder-“images” in folder-“journal”.

<img src=“images/segway2.jpg">

When I drag the image into my browser, the pathway is as follow:
“file:///Users/johnlee/Desktop/Journal/images/segway2.jpg”

I tried to enter the above pathway into my img tag, but it didnt’ work either.

The website can’t read your local file-system. You can upload the image to a hosting platform (such as Imgur) and use that link.

1 Like

Even if I am just testing my HTML file by opening my browser, I still need to upload the image onto a hosting site?

Oh!
No, if you’re hosting the HTML file locally you can use the local path. You don’t want the file:/// path though. You want something like C:/Documents/Folder/file.jpg. You can get this from the file explorer (if you’re using Windows). If the image file is stored in the same directory as your HTML file, then it’s as simple as ./file.jpg, but with your file’s name and extension.
I definitely recommend the second method, as that will work when you host the website on a live server (i.e. GitHub pages) as long as the image file is hosted too. My images for my profile page are in the repository with my code, so the page can find them and render them and I don’t have to host them separately.

EDIT: This was probably more info than you needed and I rambled a bit. Sorry! :sweat_smile:

<img src=“images/segway2.jpg">

The above is what I have now. But it does not seem to work. I’m also using a Mac. Is my pathway not correct?

Is the images folder a subfolder in your .html location?

Yes the “image” folder is a sub folder. The “image” folder and “.html” file is in a folder called “jnc”. The “.html” file is not inside the image folder.

Then you want what’s called a relative path.

Your image src attribute should be ./images/segway2.jpg. The ./ tells the code to look in the current directory (where the .html file is located), then go into the images folder, then get the segway2.jpg.

UHG…it’s the dumbest thing. I figured out what I did wrong. I needed to remove the quotation marks in <img src=“images/segway2.jpg"> and it resolved the issue. :expressionless: . But thank you for helping me :grinning:

:sweat_smile: :sweat_smile: