My images still don't appear on either browser

are you on your local machine? make sure your relative paths are listed appropriately (you can also use absolute paths on a local machine, but this can be a headache). For example, if my index.html is in a folder called "project", and my images are in a folder called "img" inside of "project", from my index.html my images can be sourced by src="img/whatever.png" (or jpg, jpeg, etc.; it is also important to have the correct file extension listed as well!). However, if I have another folder inside of project called "css" that containes my stylesheets, to reference background images and such I will need to source them with a prefix of "../" to get to one directory (folder) above the css folder (in this example linking to the image would mean something along the lines of url('../img/whatever.png').

So... double check your:

1. Paths to the image.
2. Correct file extensions.

They both have to be absolutely correct.

Hope this helps!

another thing that the ? makes me think of... depending on your operating system, user permissions could also be an issue, but doubtful that this is the cause if you are creating the directories and files and opening them as your own user on the machine. This would be more of an issue in a hosted server environment where the files are created by me as User1 and my server is trying to serve them as a different user that doesn't have permission to access User1's files and/or directories.

To get my images on a local server I have to get the images in the browser. I have to go to open file and find the image. Then I copy the url of the image and paste it to the source. This works for me hope it helps.

that is an easy fix, but then again that ends up being an absolute path unless you omit everything up to the directory you need, and if you move your project directory (so I'm calling it for this purpose anyway) then it breaks again, and/or you have to repeat the process with every image.

for instance, if I used absolute paths and my image originally existed at:

"/users/MYUSERNAME/home/projectfolder/img/whatever.png"

then I move the project folder to:

"/var/www/projectfolder" (and all of it's directories contained within it: img, css, assets, etc...)

then my source paths no longer work, and I have to repeat the process for all of my images to copy/paste the new absolute paths for all of them. Later you'll be referencing multiple images, stylesheets, javascripts, and more and relative paths make everything much, much easier.

If I had used "img/whatever.png" as a relative path (or "../img/whatever.png" if I need to move up a directory in the tree before moving back down again, like a stylesheet in the css directory and both directories, css & img, are within the same 'project' directory) then no matter where I move the main directory of the project the paths still work.

Thanks

Thank you all for your reply's, I'm new to this area so I don't really follow what your solutions are for this problem...

Just think of computer storage as a filing cabinet. Directory == folder (the words themselves are pretty much interchangeable). Paths are our way of instructing the computer where to locate the directory (folder) and file we want it to access.

Imagine if someone were blindfolded and you had to tell them where to find a file in the cabinet. Absolute paths are like starting by telling them to first "open the drawer" then go so many folders then get deeper into that folder. For example (in Windows):

C:\Users\MyUser\WebProjects\NewProject\img\image.jpg

C:\ is the name of the cabinet, and you're instructing the computer to go to the beginning and open the drawer, then find the folder "Users" then the folder "MyUser" within the "Users" folder and so on until you get to the "img" folder that finally contains the jpeg "image.jpg"

Relative paths are like already being inside of a folder, and instructing the blindfolded person (or the computer) where to go 'relative' to the folder you're currently in. If your html file is inside the "NewProject" folder (above) all you have to do is (within your html file) tell the computer that the SRC (source file for the image) is in the img folder and the image's name is "image.jpg" so the relative path would be simply:

img\image.jpg

because you're already inside the NewProject folder (ALSO!!! note- the slashes would all be / instead of \ in html.. just using a windows pc file structure as an example. If you ever get into Linux all paths are indicated by / like img/image.jpg like it will be in your html and css. much better...)

if you ever see ../img/image.jpg the intention of the .. is to move up one directory. If inside of your NewProject folder you had a stylesheet inside of the css directory (relative path would be css/stylesheet.css, then to access an image in the img directory you would first have to use ../ to move up into the NewProject folder then back down into the img folder. Visually:

C:/ | |----Users | |----MyUser | |----WebProjects | |----NewProject | |----index.html | |----img | | | |----image.jpg | |----css | | | |----stylesheet.css

All said and done, if you tell the computer to go to the wrong place, it won't find what you're looking for, resulting in the problem you're seeing (question mark, broken link, "X", seeing alt text, et cetera depending on the browser)

I hope this helps!!!!!