Using a front controller design pattern doesn't allow images to be served

Question

I am currently using a front controller. All requests for my website go through it. I have a problem with image links like:

<img src="img/image.jpg" />

Then my front controller will try to dispatch the request to: application/controller/ImgController.php. Then the image won't load. I think it has something to do with the .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

Answer 1

It looks like your rewrite rules are designed to do a null rewrite for any file that actually exists, and pass everything else into index.php. I don't see a reason why that shouldn't work, but I usually see this implemented a a single rule with some not exists rules on it:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-s
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ index.php [NC,L]

Answer 2

While I would normally choose a solution such as that Stephen has presented which only applies the routing rules to URL's which do not match existing files and folder paths, if you specifically wanted to allow your images to work and keep your other rules as they currently are then you could use the following to whitelist your img folder (along with your index.php script, robots.txt and sitemap.xml which you'll no doubt need white-listed also:

RewriteRule ^(img|index\.php|robots\.txt|sitemap\.xml) $1 [L]

Simply include this line in your .htaccess file, after RewriteEngine On but before your other conditional rules. The backslashes (\) in the expression are escape strings since otherwise the . has a special meaning, this way it's looking for a literal ., e.g. in the filename index.php.

If you had a lot of folders or files you wanted to white-list then you might use several lines like this one after the other.

Answer 3

I assume that this <img src="img/image.jpg" /> is in some subpage of your site, like http://www.example.com/page1/.

The problem here is that you are using a directory relative URL for your image, so your browser will try to fetch http://www.example.com/page1/img/image.jpg, because it simply appends the relative URL to current page URL.

However, since the image probably exists at http://www.example.com/img/image.jpg, the end result is that your web server checks the existence of the file, declares that it cannot find the file (path being wrong), and passes the request to index.php.

The solution to this problem is to use domain-relative URLs with images, like this:

<img src="/img/image.jpg" />

The same concept applies also to all other external resources specified in the HTML code.