URL rewriting : css, js, and images not loading

Question

I've following rule for .htaccess

Options +FollowSymLinks

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]

RewriteRule ^detail/([0-9]+)/?$ detail.php?id=$1

It redirects http://localhost/detail/123 URL to http://localhost/detail.php?id=123. The page redirects successfully, but the problem is CSS, JS, and images are not loading,

CSS, js files are located under http://localhost/css/ and http://localhost/js/

One solution is to use absolute path (ex /CSS, or /js rather than just CSS/, /js but this does not seem a reliable solution since we've to change it on all files,

Any other solution based on .htaccess rules, which is independent of editing all PHP files and let us use "relative paths"?

you should use absolute path based on your system e.g. if you using linux it would be something like /var/www/css/ — mk_89
– mk_89, Commented Oct 14, 2012 at 14:47
they are at http://localhost/css/style.css and http://localhost/js/js.js — Bhavesh G
– Bhavesh G, Commented Oct 16, 2012 at 15:34
Also i have to make an empty directory, in this case "details" for the rewrite to work, is there a way around it? — stash_man
– stash_man, Commented Jul 28, 2016 at 13:50

Jon Lin · Accepted Answer · 2012-10-14 22:31:48Z

24

one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,

This is because your relative URIs have their base changed. Originally, the base is / when the page is /detail.php?id=123, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /detail/123 the base suddenly becomes /detail/ and it tries to append that in front of all relative URLs and thus none of them load.

You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):

<base href="/">

answered Oct 14, 2012 at 22:31

Jon Lin

144k29 gold badges226 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhavesh G Over a year ago

any other solution rather than editing the actual php, html files ( eg. .htaccess file rules)

soonic Over a year ago

This one helped me <base href="/project/"> and I don't have to change the path for all my scripts or css files. Thank you Jon.

Anthony Hatzopoulos · Accepted Answer · 2019-07-17 16:42:55Z

20

+50

Don't be lazy and change your relative URIs in your resources to root directory absolute pathing like /css/style.css. This is the best.

You can get clever and use regex and replace all the files you need which would be like a few one liners and you're done. How many places could there be to change? And you should be using a template.

This should work but I wouldn't go this way.

RewriteRule ^detail/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]

edited Jul 17, 2019 at 16:42

answered Oct 26, 2012 at 19:24

Anthony Hatzopoulos

10.6k2 gold badges42 silver badges57 bronze badges

4 Comments

Bhavesh G Over a year ago

do you mean that i should use "Absolute Paths" in all my resources ? Rather than "Relatives"

Anthony Hatzopoulos Over a year ago

@BhaveshGangani kind of yes, but not the kind with the protocol and domain http://example.com/css/style.css, but this type of root directory absolute pathing: /css/style.css

Joe Over a year ago

Would be great to have the comment clarification in the main body :)

Anthony Hatzopoulos Over a year ago

Thanks @Joe - I've made the improvement.

Sajal · Accepted Answer · 2013-09-30 20:10:18Z

7

I applied url rewriting to a project in core php. I faced the same problem. css, Js and images were not getting loaded. I used this and it worked for me. Source

# Allow any files or directories that exist to be displayed directly
RewriteCond ${REQUEST_URI} ^.+$
RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g|png|js|css|swf|php|ico|txt|pdf|xml)$ [OR]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^ - [L]

answered Sep 30, 2013 at 20:10

Sajal

1,2161 gold badge19 silver badges33 bronze badges

Comments

Perleone · Accepted Answer · 2012-10-27 23:12:25Z

1

Anthony's answer is perfectly valid, and he is actually trying to impart some good practices there.

However, since you do not seem content with that answer, here is a different solution. Just insert this line into your .htaccess before any Rewrite-Command:

RedirectMatch permanent ^/detail/((css|js)/.*)  /$1

It will redirect all the originally 404 requests for /details/css/style.css and /details/js/js.s to their actual location. Neither particluarly pretty nor elegant, but it simply works.

answered Oct 27, 2012 at 23:12

Perleone

4,0381 gold badge29 silver badges26 bronze badges

Comments

danu · Accepted Answer · 2017-08-04 07:57:15Z

0

this code perfectly work for me, add before redirect rule(RewriteRule ^detail/([0-9]+)/?$ detail.php?id=$1)

RewriteRule ^(.+)/(admin|css|fonts|ico|include|js|images)/(.*)$ $2/$3 [L]

answered Aug 4, 2017 at 7:57

danu

316 bronze badges

Comments

Jignesh Joisar · Accepted Answer · 2020-06-18 12:45:10Z

0

just exclude directory it will load automatically that's it

RewriteRule ^(css|js|fonts|images|plugins)($|/) - [L]

answered Jun 18, 2020 at 12:45

Jignesh Joisar

15.4k6 gold badges69 silver badges61 bronze badges

Comments

Abdul Aziz · Accepted Answer · 2022-01-07 08:15:38Z

0

my issue resolved when i changed the style link from

 <link href="css/styles.css" rel="stylesheet" />

into <link href="/css/styles.css" rel="stylesheet" />

answered Jan 7, 2022 at 8:15

Abdul Aziz

12 bronze badges

Collectives™ on Stack Overflow

URL rewriting : css, js, and images not loading

7 Answers 7

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related