I am trying to rewrite the URL through the htaccess file so that the following URL
www.domain.com/subfolder/index.php?key
can be accessed by:
www.domain.com/subfolder/index.php/key
the specified "key" will determine which page to include in the PHP code. I have the following htaccess code already, however the CSS, JS, images and such are not being displayed when using the second (clean) URL. Any ideas as to what could be the issue?
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{DOCUMENT_ROOT}/$1 -f
RewriteRule ^[^/]+/([^.]+\.(?:js|css|jpe?g|png|gif))$ /$1 [L,R=301,NC]
RewriteRule ^index.php/([a-zA-Z0-9/_]+)$ index.php?key=$1
When you use relative url's, the browser will dynamically create a complete url by using the url of the resource it loaded. In other words: It uses the url as it is displayed in the address bar. In your case (www.domain.com/subfolder/index.php/key
) it tries to load any relative url relative to www.domain.com/subfolder/index.php/
. Your resources are however not located there.
You have two options to resolve this problem:
Convert your relative url's into absolute url's, at least absolute to the domain root. Something like <img src="img/unicorn.png">
should be turned into <img src="/path/to/img/unicorn.png">
.
Add a base to your head element. This base will be used instead of the url of the resource to calculate the complete url. You should add <base href="/">
to your <head>
element. /
will then be used as the base of any relative url.
Did you try the base URL? That is the best solution I have come across. Just put one in the head and then you can even give it an ID and access the URL with javascript.
<base id='baseElement' href="your path goes here"> <!--possibly generated with serverside code-->
Access with jquery
var base = $('#baseElement').attr('href');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With