Locating img src on MAC

HTML-CSS
1

Hi there. I’m new to coding and right now doing a CSS-HTML course. I’m battling to add an image to my html file from my local MAC drive. It just doesn’t work. For example I saved a photo on desktop and it became .png file with path file:///Users/mikeshik/Desktop/myboat.png and my element looks like this:

img alt=“Mike’s sailing boat” width=200 src=“file:///Users/mikeshik/Desktop/myboat.png”

but the image isn’t displayed…

Anyone can help?

2

you have to navigate to it in relation to your html file inside your root folder for your project.
its best to put the image inside your root folder
say you have the image inside an image folder inside your project, you say src="image/pic.png"

3

ok, so what is wrong with my path? src=“file:///Users/mikeshik/Desktop/myboat.png”

4

it doesnt initialize from the location of your html file. you would have to back out all the way to your C:/ drive from your project folder like this ../../../Users/mikeshik/Desktop/myboat.png assuming your folder was 3 folders deep from C:/

5

Ok, I get it, I understand that there are 2 options:

  • place image in the same folder as html file;
  • get image form any folder on local drive -> this is the option I’m trying to use as my project is with JSBin

Any ideas? :slight_smile:

6

oh ok. im not familiar but the 2nd option so youre probably right then

if youre using an online editor it doesnt have direct access to your C drive so you will have to use a url from an online source.

one option is to upload your image to an online server/database like imgur or something

1 Like
7

of course! can you suggest a trusted online document holder for url creation?

8

i use imgur but not for anything serious.
you might also be able to use github as an image dump but that might be a little more advanced

there might be nicer options for free but im not aware of them.

9

Ok, thank you for your help!

10

actually just make a new github repo and upload images to it then use the links to the images. thats actually a pretty good idea and not that hard. im gonna start doing that

2 Likes
11

Hi again. I’m still struggling a bit. With github it’s a bit complicated. I tried to upload to Flickr but my image doesn’t get loaded. I use CSS for image upload to the background. May eb something wrong with the code?

body {
background-image: url(“flickr_share_link”);
background-position: center center;
background-size: 100% 100%;
}

12

Oh, I managed, I was just not using the correct image link :-). I had to sue ‘embed’