Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

<img> problem

J

Jas123

macrumors member
Original poster
Apr 1, 2008
97
0
for some reason I cannot get any image to display. I've tried both full and relative paths. However, when I enter the path in the address bar file:/// etc.... it will show up. When I bring the page up as an html page, all I see is a ? with a box around it. the image is a .jpg

while I'm here, what's the best way to incorporate a flash player.


Thanks for any help.
 
<img src="../images/file_name.jpg" />
<img src="/users/**/images/file_name.jpg" />

I'm running a bare html page to try and debug this problem; it is only displaying this image.
 
I'm feeling a little bit silly as to what the problem is, but when I move the image to the same directory I can display it with just "file_name.jpeg."

When I enter the path, that i provide in the previous post, directly into the address bar in safari, it'll bring up the image. Is there a directory that I am missing? am I using the appropriate path?

Thanks
 
Assuming that you have no <base> element (is that right?), here's what those img elements mean:

Code: 
<img src="../images/file_name.jpg" />
This one means that file_name.jpg is the images subfolder of the folder that contains the folder your html file is in.

In other words, you have them organized like this:
/users/Jas123/pages/mypage.html
/users/Jas123/images/file_name.jpg
​
where "pages" is any folder name you like.
​



Code: 
<img src="/users/Jas123/images/file_name.jpg" />
This one means that file_name.jpg can be found in the path /users/Jas123/images/file_name.jpg starting from the document root of your web server. And that is the root (pardon the pun) of your problem.

When you reference a file in a web page with an absolute path, it is fetched from a location relative to the "starting point" of the web server, usually called the document root. On a Mac, the document root defaults to
/Library/WebServer/Documents​
so your image would have to be located in
/Library/WebServer/Documents/users/Jas123/images/file_name.jpg​
I don't think that's what you mean.​


So let's go back to the relative path. Perhaps instead of having pages and images subfolders, you have your web page in the same folder that has the images subfolder, e.g., your files are here:
/users/Jas123/mypage.html
/users/Jas123/images/file_name.jpg
​
If that's the case, then you want this:
Code: 
<img src="images/file_name.jpg" />
which means "start at the current location and go into the images folder."
 
Thanks for the reply.

- i have my site root, where index.html is, in the "sites" folder.
i have an image folder outside the site root so in the same directory as the "sites" folder

this is where i used src="../image/file_name.jpg

Using this still will not bring up the image.

- I tried placing the absolute path you gave me as the src, but it is still not bring up the image.
 
src="../image/file_name.jpg

Make sure that you pair up all quote marks. So thats the line you provided above, is missing its ending quote, should be

<img src="../image/file_name.jpg" />
 
Jas123 said:
- i have my site root, where index.html is, in the "sites" folder.
i have an image folder outside the site root so in the same directory as the "sites" folder

this is where i used src="../image/file_name.jpg
Click to expand...
Do I understand correctly that your files are in locations like these?
/users/Jas123/sites/index.html
/users/Jas123/images/file_name.jpg​
If so, then then reference
<image src="../images/file_name.jpg">​
should work if you go to
file:///Users/Jas123/Sites/index.html​
The easy way to go to that URL is to drag file index.html into your web browser. If you do that, does the image show up? (I know that's still using file://, not http://, but I want to make sure I understand.)


Assuming that works, it's still a bit unusual to put the images folder outside the sites folder (in a sibling folder), rather than putting the images folder under the sites folder. If you want to change that, put the images folder under the sites folder, so your files are
/users/Jas123/sites/index.html
/users/Jas123/sites/images/file_name.jpg​
Change the reference to
<image src="images/file_name.jpg">​
and drag file index.html into your browser, which should take you to
file:///Users/Jas123/Sites/index.html​
and you should again see your image.
 
Doctor Q said:
Do I understand correctly that your files are in locations like these?
/users/Jas123/sites/index.html
/users/Jas123/images/file_name.jpg
Click to expand...

Yes these are correct.
Doctor Q said:
file:///Users/Jas123/Sites/index.html
Click to expand...

this works. (http://) does not.

I have it set up this way because images will be a folder for uploads.

http:// -- with the images folder inside the site root will work.

I'm pretty sure I won't have a problem if I upload to an external server. I'm just trying to figure out why it's happening on my machine.

Thanks again for all your help.
 
On your Mac

The file: prefix fetches files relative to your disk filesystem, so these URLs map to these files:
file:///Users/Jas123/sites/index.htm -> /Users/Jas123/sites/index.html
file:///Users/Jas123/images/file_name.jpg -> /Users/Jas123/images/file_name.jpg
​

If you want to view the files using the real web protocol (http) then you need to move or copy the files somewhere under the document root of some webserver. On your own Mac, that would be under /Library/WebServer/Documents.

The http: prefix fetches files relative to the web server's document root directory, so these URLs would map to these files on your Mac:
http://mymacname/sites/index.htm -> /Library/WebServer/Documents/sites/index.html
http://mymacname/images/file_name.jpg -> /Library/WebServer/Documents/images/file_name.jpg
​
In other words, you could see your web page and the image by going to
http://mymacname/sites/index.htm​
or the shorter form
http://mymacname/sites​
since index.html is the default web page name.


If you have a website

If you have a website on some shared server from an ISP, the folder you upload web pages to (often with FTP) might be named something like /users/myaccount/public_html. So that's the document root for that web server.

You would want the files to be at
/users/myaccount/public_html/sites/index.html
/users/myaccount/public_html/images/file_name.jpg​
and you see the page by going to
http://mywebsite.com/sites/index.html​
or
http://mywebsite.com/sites​


A potential problem

With the examples above, these URLs won't work:
http://mymacname/index.html (your Mac)
http://mywebsite.com/index.html (your website)​
or the equivalent short forms
http://mymacname (your Mac)
http://mywebsite.com (your website)​
The reason is that to make them work you would have to put the files here:
/Library/WebServer/Documents/index.html
/Library/WebServer/images/file_name.jpg
​
or
/users/myaccount/public_html/index.html
/users/myaccount/images/file_name.jpg​
and web servers won't let you get to a file that isn't under their document root (i.e., won't let you get to a file that isn't under /Library/WebServer/Documents or /users/myaccount/public_html). The problem is that the ".." in your <image> tag is trying to escape out of the restricted area.


How to fix it

If you want to make these URLs work:
http://mymacname/index.html
http://mywebsite.com/index.html
http://mymacname
http://mywebsite.com​
then you have to take my suggestion to move the image folder to the same place as file index.html and change the image element from
<image src="../images/file_name.jpg">​
to
<image src="images/file_name.jpg">​
 
Jas123 said:
Thanks for the reply.

- i have my site root, where index.html is, in the "sites" folder.
i have an image folder outside the site root so in the same directory as the "sites" folder
Click to expand...

The Apache web server can't display content that is located outside the site root. That's why it's called the root.
Move your images directory into the sites folder and adjust your path accordingly.
 
Darth.Titan said:
The Apache web server can't display content that is located outside the site root. That's why it's called the root.
Move your images directory into the sites folder and adjust your path accordingly.
Click to expand...

Thanks for helping with the problem.

if this is the case, why doesn't this:
<img src="/users/jas123/sites/images/image.jpg" />

work?
 
Doctor Q -- you've been really helpful

I think I'm starting understanding the problem now. but to try and clarify some things:

/users/myaccount/public_html
- would public_html be the equivalent of the sites folder?

and should this:
/users/myaccount/public_html/index.html
/users/myaccount/images/file_name.jpg **

be:
/users/myaccount/public_html/images/file_name.jpg
or is myaccount taking the place of the sites folder on the server?


lastly:

users/jas123/sites/image/image.jpg, seems like an absolute path to me. shouldn't this work?
 
Jas123 said:
/users/myaccount/public_html
- would public_html be the equivalent of the sites folder?
Click to expand...
Mostly correct, and probably close enough in this context.

Jas123 said:
and should this:
/users/myaccount/public_html/index.html
/users/myaccount/images/file_name.jpg **

be:
/users/myaccount/public_html/images/file_name.jpg
or is myaccount taking the place of the sites folder on the server?
Click to expand...
I believe so, but each host can set things up slightly differently. You generally won't need that level of an absolute path as on the server the root will start at the public_html folder. So, on the web server you'll use /images/file_name.jpg to access the images and the images folder will be located inside the public_html folder.

Jas123 said:
users/jas123/sites/image/image.jpg, seems like an absolute path to me. shouldn't this work?
Click to expand...
Absolute paths will start with / at the beginning. What you have there is a relative path and would assume there is a users folder in the current folder (relative to the file making that call).
 
There are really five rules that explain it all.

1. If your URL is http://somedomain/somepath/somefile then the location of the file is /docroot/somepath/somefile, where "/docroot" is the document root folder of the web server. You have to know where that is for each web server you use.

2. If a src or href reference in your HTML has the form "/somepath/somefile" (with a leading slash) then it's an absolute path (which actually means a path relative to the docroot). The file it refers to is /docroot/somepath/somefile.

3. If a src or href reference in your HTML has the form "somepath/somefile" (without leading slash) then it's a relative path (which means relative to the page you are on). The file it refers to is /currentfolder/somepath/somefile, where /currentfolder is the path to the folder that contains the current page.

4. If you put <base href="http://anydomain/anypath"> in the <head> section of your webpage, it changes rule #3. Relative paths will start from the location in the href instead of starting from the folder of the current page.

5. If a src or href reference uses the ".." (dot dot) notation, it means to go up one folder, but it won't work if it moves up past the document root, since that would be a security violation.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back