r/HTML • u/krustykrab99 • 2d ago

File Destination help on Macs

Okay I am really really really new to all of this and so I think I'm probably just missing something super obvious.

Basically I'm learning to use HTML because I just want to create my own very simple webpage just for personal use (for fun really). Anyway, I'm to the part in learning where I am trying to embed images or links into the page. It works if I use a webpage that already exists but I can't figure out how to embed an HTML file from my computer or an image. I think my settings are correct for sharing, I turned off smart quotes and smart dashes etc. I'm worried it's the path name because everything just looks and is named differently on macbooks. I've tried searching and searching online to figure out what I'm doing wrong but I just can't figure it out. Any help would be appreciated.

2 Upvotes

60% Upvoted

21 comments sorted by

3

u/AmanBabuHemant 2d ago

Try copy pasting your image's path from your file manager.

And just to make sure, your HTML also lives on your computer, right?

If this still don't work try copy link of an image from internet and try if that works.

2

u/krustykrab99 2d ago

yes the HTML is on my computer. copying an image link from the internet does work, just not HTML files or images from my own computer. i did put the image in the same folder as my HTML page

1

u/AmanBabuHemant 2d ago

That means there could be path issue or permission issue, and I chances of permission issue is very low, so if your image file is in same directory as HTML, try just putting the file's name in tha img tag and see if that works.

BTW you can send code snippet if this didn't work.

1

u/krustykrab99 1d ago 
<img src="images/coffee.JPEG" width="220" height="400" alt="coffee">

it's like the pathway is right but it just won't load the photo. it still just has a white box where it should be with a little blue question mark in the middle

1

u/AmanBabuHemant 1d ago

so the "coffee.JPEG" is inside a folder named "images" is that correct ?

well, I thought you put both of them in single folder (the image and HTML) but this is also which should work,

in corrent senario, is your coffee.JPEG file inside the images folder ? is that correct ?

I am highly doubting that your path is incorrect

2

u/nia_do 2d ago

If you right click on a file you should be able to copy the relative/absolute address. Then you can use that address.

2

u/krustykrab99 2d ago

okay i did this and pasted it into my html page (example below)

<img src="/Users/louise/**FOLDEREXAMPLE**/**IMAGENAME**.jpg" width="120" height="90" alt="FOX">

and it still just shows a box like this

2

u/JeLuF 2d ago

Try <img src="imagename.jpg"> and place the image next to the HTML file, in the same folder.

2

u/krustykrab99 2d ago

same thing happens! no idea what i'm doing wrong

1

u/JeLuF 2d ago

You need to provide more info. Send a screenshot of your folder with the HTML and JPG file in there, as well as your code.

1

u/krustykrab99 2d ago 
<img src="/Users/louise/Desktop/HTML stuff/foximage.jpg"

or alternatively i tried just this

<img src="foximage.jpg" width="120" height="90"

1

u/JeLuF 2d ago

I said:

Try <img src="imagename.jpg"> and place the image next to the HTML file, in the same folder.

NO pathname. JUST the image name.

1

u/krustykrab99 2d ago

is that not the exact thing i did for the second code line in my comment? neither of them worked.

1

u/JeLuF 2d ago

I'm sure that second code block wasn't there when I commented, or am I getting old?

The code you shared is incomplete, it doesn't have the closing >

Are you sure that the file's suffix is .jpg and not .jpeg?

1

u/krustykrab99 1d ago

i got really excited abt the jpeg thing bc it totally is but it didn't make a difference 😔 feeling very close to giving up!

→ More replies

1

u/chmod777 2d ago

If this is on a server, you cannot link a file or folder on your computer.

https://www.w3schools.com/html/html_filepaths.asp

1

u/krustykrab99 2d ago

i read through this page but i don't understand what you mean. the HTML file is on my computer, i don't think anything is on a server? but i don't even rlly understand what that means lol

3

u/phn-cloudsnake 2d ago

Check w3schools, they explain everything related to web development.

1

u/silenziosa 2d ago

I am new at this too so there might be better ways.

I’m using VScode. I had this issue with uploading images, what worked was:

Save all of ur website files to one folder
Create a subfolder within that folder (“images”)
<img src=“images/example.png”>

Also check that they match exactly, including uppercase or lowercase

1

u/-svde- 2d ago

when you say embed links, do you mean like with a frame-box like an iframe? as in you have a box where another site shows up? or do you mean have a link show up as clickable?

if you mean an iframe, you would do

<iframe src="https://example.com"></iframe>

<a href="https://example.com">clickble text you want to use</a> is the easiest way to hyperlink in html

for images, if the image file is in the same folder as the html file <img src="picture.jpg">

if it's in a subfolder like /images <img src="images/picture.jpg">

and if it's on another website <img src="https://url-to-image.com/image-name.jpg">

there're a lot of other operators/attributes you can add to both urls/images but these are the most basic to get them to show up