CSS not loading after redirect with htaccess rewrite rule

Question

I have the following Short-hand for a user profile url

RewriteRule ^(\\w+)/?$ ./profile.php?name_of_user=$1

The site is styled with the app

Answer 1

When your page URL is example.com/name_of_user/, loading of resource css/js/images may cause problems if your HTML page is using relative paths for these resources. It is because browser resolves resource URLs using current URL.

So for example if a style tag is:

and your current page URL is:

http://example.com/name_of_user/

Then browser will resolve css URL as as example.com/name_of_user/static/style.css instead of example.com/static/style.css. This will cause 404 for resource URLs and your page will be displayed without any style, scripts and images.

You can solve this problem using one of the following ways:

1. Use absolute path in your css, js, images files rather than a relative one. Which means you have to make sure path of these files start either with http:// or a slash /.

2. Otherwise You can add this just below section of your page's HTML:

so that every relative URL is resolved from that base URL and not from the current page's URL.