URL rewriting : css, js, and images not loading
Solution 1
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]
Solution 2
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="/">
Solution 3
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]
Solution 4
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.
Related videos on Youtube
Bhavesh G
Over 10+ years of extensive experience in full-stack web development. Technologies include PHP (5.6, 7, CodeIgniter, Zend Framework, Custom Frameworks), HTML(5), CSS(3), MySQL, SQL, Javascript, web services, SOAP and REST API development jquery, Bootstrap, GIT, LAMP/Apache/NGINX Environment, Linux, MVC methodology, Object-Oriented design, UX and UI responsive design, making functional specs, application design, and architecture, Over 1-4 years of experience in: Amazon AWS / Azure / Heroku cloud, Node.JS, C#, Python, Redis, Memcached, WebRTC, integration, highly adaptive to latest tools and technologies Great at debugging/troubleshooting code, having best practices in coding and software engineering, Agile Development environment
Updated on January 07, 2022Comments
-
Bhavesh G over 2 years
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 tohttp://localhost/detail.php?id=123
. The page redirects successfully, but the problem isCSS, JS, and images
are not loading,CSS, js files are located under
http://localhost/css/
andhttp://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"?-
mk_89 over 11 yearsyou should use absolute path based on your system e.g. if you using linux it would be something like
/var/www/css/
-
Carlos over 11 years¿Where exactly are your css and js directories?
-
Bhavesh G over 11 yearsthey are at
http://localhost/css/style.css
andhttp://localhost/js/js.js
-
stash_man almost 8 yearsAlso i have to make an empty directory, in this case "details" for the rewrite to work, is there a way around it?
-
-
Bhavesh G over 11 yearsany other solution rather than editing the actual php, html files ( eg.
.htaccess
file rules) -
Bhavesh G over 11 yearsdo you mean that i should use "Absolute Paths" in all my resources ? Rather than "Relatives"
-
Anthony Hatzopoulos over 11 years@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
-
Basil Musa almost 9 yearsThanks Jon. Fastest and neatest solution.
-
soonic about 8 yearsThis 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. -
Joe almost 5 yearsWould be great to have the comment clarification in the main body :)
-
Anthony Hatzopoulos almost 5 yearsThanks @Joe - I've made the improvement.