<img> problem

Discussion in 'Web Design and Development' started by Jas123, Jul 29, 2009.

  1. Jas123 macrumors member

    Joined:
    Apr 1, 2008
    #1
    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.
     
  2. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2
    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" ;)
     
  3. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #3
    The <base> element in your <head> section may also be part of the problem.
     
  4. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #4
    <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.
     
  5. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #5
    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
     
  6. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #6
    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."
     
  7. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #7
    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.
     
  8. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #8
    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" />
     
  9. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #9
    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.
     
  10. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #10
    Yes these are correct.
    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.
     
  11. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #11
    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">​
     
  12. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #12
    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.
     
  13. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #13
    Thanks for helping with the problem.

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

    work?
     
  14. Jas123 thread starter macrumors member

    Joined:
    Apr 1, 2008
    #14
    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?
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    Mostly correct, and probably close enough in this context.

    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.

    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).
     
  16. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #16
    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.
     

Share This Page