PDA

View Full Version : <img> problem



Jas123
Jul 29, 2009, 05:52 PM
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.


Cerebrus' Maw
Jul 29, 2009, 05:58 PM
Post the line of html that has your <img> tag in it. We might be able to garner a bit mre from that then just a description of "It doesn't work" ;)
Doctor Q
Jul 29, 2009, 06:27 PM
The <base> element in your <head> section may also be part of the problem.
Jas123
Jul 29, 2009, 08:14 PM
<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.
Jas123
Jul 29, 2009, 08:34 PM
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
Doctor Q
Jul 29, 2009, 09:24 PM
Assuming that you have no <base> element (is that right?), here's what those img elements mean:

<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.




<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:
<img src="images/file_name.jpg" />
which means "start at the current location and go into the images folder."
Jas123
Jul 30, 2009, 01:33 AM
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.
Cerebrus' Maw
Jul 30, 2009, 02:23 AM
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" />
Doctor Q
Jul 30, 2009, 05:50 PM
- 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

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.
Jas123
Jul 30, 2009, 08:00 PM
Do I understand correctly that your files are in locations like these?
/users/Jas123/sites/index.html
/users/Jas123/images/file_name.jpg


Yes these are correct.

file:///Users/Jas123/Sites/index.html


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.
Doctor Q
Jul 30, 2009, 09:29 PM
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">
Darth.Titan
Jul 31, 2009, 02:47 AM
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


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.
Jas123
Jul 31, 2009, 06:09 PM
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.

Thanks for helping with the problem.

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

work?
Jas123
Jul 31, 2009, 06:25 PM
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?
angelwatt
Jul 31, 2009, 06:57 PM
/users/myaccount/public_html
- would public_html be the equivalent of the sites folder?
Mostly correct, and probably close enough in this context.

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?
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.

users/jas123/sites/image/image.jpg, seems like an absolute path to me. shouldn't this work?
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).
Doctor Q
Jul 31, 2009, 07:48 PM
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.