How does my browser find images?

[chronozphere]

Hey guys,

I've put pascal on the fridge for a moment. Now I'm doing a webdevelopment project, and I'm stuck. :( I know some of you have done webdev, so I thought I should ask this here.

I've got a webserver with some images on it. Also there is some PHP/Ajax going on to make it more complicated. Let's say my image is stored in:



/htdocs/data/uploads/image.jpg


The user go to the URL:



www.mydomain.com/photos/gallery/6


The following script is started to generate the HTML:



/htdocs/scripts/show_gallery.php


The script generates images tags like:



<img src=" INSERT IMAGE HERE " />


How should I know what to insert there? I'm really confused about that.

Can someone give me a general explanation of how I should deal with absolute and relative paths on servers and in URL's because I'm really lost. A link to a good article is also highly appreciated. :D

Thanks!

[User137]

I assume you should fill the "INSERT IMAGE HERE" part in the php script. Quick googling came up with these for example:
http://www.scriptol.com/how-to/parsing-url.php
http://php.net/manual/en/function.parse-url.php

[AthenaOfDelphi]

If the directory /htdocs corresponds with the URL www.mydomain.com, then the image you've give as en example would be available on the URLs www.mydomain.com/data/uploads/image.jpg or /data/uploads/image.jpg. The rider here is that you are actually going to serve the image directly as opposed to serving it through a script. They would be absolute URLs to the image you've specified.

Relative URLs can be a little tricky. You're obviously using a framework, which may impact things, but I think the relative path in this case would need to be based on the URL you requested... so to get that image it would need to be ../../data/uploads/image.jpg.

Relative paths can be a pain, so in general, I stay away from relative paths (generally only using them for URLs in CSS), prefering instead to use absolute paths like the ones I've suggested above.

What framework is it that you're using? If it's CodeIgniter or one of your own making, I may be able to provide more assistance in the form of code snippets.

[Traveler]

Relative urls are based on the location of your php script. Say your script resides in /htdocs/scripts/ and you want to display an image from
/htdocs/data/uploads/image.jpg. Assuming /htdocs/ is the root of your website the relative source path to the image is ../data/uploads/image.jpg
The absolute path points towards the root of your site. It does not matter where your php script is located, you can always use /data/uploads/image.jpg. Personally I prefer to use absolute locations, so that I can copy/paste scripts to different locations without having the need to alter these image paths afterwards.

edit: you beat me to it Christina :) In fact you are bit more precise in the case of frameworks, where the location of the script is not necessarily the same as the path of the url.

[chronozphere]

Thanks for the replies. :D Quite a lot of webdev people I see. :)

Yes, the basic behaviour is like I expected. So if /htdocs corresponds to www.mydomain.com, the absolute path to /htdocs/data/uploads/image.jpg would be (www.mydomain.com)/data/uploads/image.jpg.

So the relative paths are relative to the file that is requested by the browser. If the user goes to www.mydomain.com/scripts/show_gallery.php and we want to show the image by using a relative path, this would be ../data/uploads/image.jpg.

I am indeed using a framework, which makes things more complicated. I'm using Kohana which is based on Codignitor (but it's PHP 5.3 with proper OOP). When you're adding "../" strings to your relative paths, you obviously can't rely on the "path-depth" that is shown in the adressbar, because that can change depending on the requests and the routing setup you are using within the framework (there are classes for this). So relative paths are not possible. Fortunatly there are some cool functions that give me the base url of the site, so I can easily generate absolute paths for my resources. :)

So, I understand those paths now. I've uploaded an image to a certain URL but I can't reach it from there. It gives me a 403 forbidden error (also when I change the filename to something non-existent). I can't verify that it's there and that it can be reached. Guess I have to dig in the .htaccess files. :(

It's very odd that the image can be requested when it is placed in the parent directory. ???

This changes the subject of the thread a bit, but is there someone here who is familiar with .htaccess?

Thanks!

[AthenaOfDelphi]

The first thing I would check for is permissions. I would be very suprised if /htdocs = the root directory of the website and you're restricted to what you can put in the directory, which is the kind of things you're likely to see in .htaccess.

If you want me to take a closer look, email the relevant files to me.

I would recommend the Apache website... the online documentation is pretty good.

[chronozphere]

I guess I solved it by myself. lol. :D

I was messing around with 3 .htaccess files. I suddenly noticed that it worked. I've tried to figure out what caused it to work. It's probably done by setting execute permission for "others" on the directory in which my images were placed. :)

Right now, I'm trying to figure out how to get access to a log file containing the output of error_log(). It's easy on my local server but not so easy on the real wild web. :(

[chronozphere]

I added the following to my .htaccess to make it work. :D



php_value error_log *path to log from server root*
php_flag log_errors on
php_flag display_errors 1
php_value error_reporting 8191

[Brainer]

If I were you, I'd use a script like this:


<?php
$imagepath="/htdocs/data/uploads/image.jpg";
$image=imagecreatefromjpeg($imagepath);
header('Content-Type: image/jpeg');
imagejpeg($image);
?>

Not sure if it helps, just a suggestion. :)

[WILL]

When working with the img tag in HTML you have to specify where the image is UNDER the domain name. You can't for example specify "pascalgamedevelopment.com/../images/". It won't work. So only specify files in HTML tags that are under the domain path. In your case you want to put <img src="../../../data/uploads/image.jpg">. You can use the "../" path identifier just like it was DOS. which is kind of a nice feature. :)

Now if you need to hide where the images are or put images outside your root html folder you can use PHP to regenerate the file, but that takes a bit more work. It's up to you how you want to organize your scripts and paths, but keep in mind that anything in the HTML file paths should be relative to whats in the browser address path, not the scripts location under the domain.

[phibermon]

see this is why everyone should use linux, windows has clouded your mind.