Codecademy Forums

Uploading Pics From Mac

#1

I am building my portfolio website on a Mac. I cannot get any images to upload from my computer. Here’s a copy of the code I’m working on

Link: https://www.codecademy.com/courses/make-a-website/projects/building-a-personal-portfolio

Code: image of

I’ve tried using the complete link in my computer so it looks like
<img src=iclouddrive/desktop/portfolio/img_0511.jpg">

but nothing is working, I’m just getting the question mark box. When I work on Visual Studio Code I get the same problem with the error: file not found.

When I upload photos from the internet there’s no issue. So, what am I doing wrong when I try to upload from my computer?

I’ve tried searching high and low for the answer and lots of the responses are for older mac systems.

Thanks in advance.

#2

You’re not exactly uploading are you, more like hosting? So it’s the very same thing as the html file. Your browser first requests the html file which references other files (your image) and so the browser requests those too. The simplest option would be to place both the html file and the image file in the same directory, and use the basename of the imagefile’s name when referring to it from the html file.

vscode has nothing to do with any of that does it? That’s a text editor. Not a browser, not a webserver, not a file system.

The link you’re using is not an absolute (complete) url. The root of your file system is /, if your browser is reading directly from your file system then an absolute link has to start with /, or otherwise be relative to the directory where your html file is.

If you’re using a webserver then reaching your file system from the browser would also require a change of protocol, so you’d have to specify that as well. file:///path/to/my/image though, if you’re using a web server then the image should probably go through there too.

2 Likes
#3

Thanks, I’m getting warmer…now I can see the alt text…but still no image. It is a problem with my code, the image, what? If you need more information let me know and I’ll provide it.

Remember, I’m new to this for forgive me if my terminology isn’t perfect.

#4

I have a bad habit of editing a lot after posting, not sure if you received it all seeing as you responded by mail.

Your path to the image is probably wrong. The path needs to be either relative to the directory of the html file, or be an absolute (complete) path, which yours isn’t. Your browser also needs access to that path.

somedirectory/
├── img.png
└── index.html

───────┬─────────────────────────────────────────────────────────
       │ File: index.html
───────┼─────────────────────────────────────────────────────────
   1   │ <!DOCTYPE html>
   2   │ <html>
   3   │   <head><title></title></head>
   4   │   <body>
   5   │     <img src="img.png">
   6   │   </body>
   7   │ </html>
───────┴─────────────────────────────────────────────────────────