Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS, JS and images do not display with pretty url

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
like image 721
PHPNorton Avatar asked Jan 02 '15 15:01

PHPNorton


2 Answers

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.

like image 183
Sumurai8 Avatar answered Oct 03 '22 01:10

Sumurai8


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');
like image 26
TheLilThings Avatar answered Oct 03 '22 02:10

TheLilThings