Url Rewriting: Css, Js, and Images Not Loading

URL rewriting : css, js, and images not loading

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]

CSS, Images, and JS not loading due to url rewrite

If you don't want to change every instance when you move your site, just update the <head> section of your html page header and add this

<base href="http://www.example.com/" />

or

<base href="/" />

This will take care of that problem and you don't have to update all instances to absolute paths.

CSS not loading after URL rewriting

Your rewrite rule looks right for me.

Maybe your css gets loaded from a relative path and not absolute ?

<link href="css/layout.css">

The browser try to load from example.com/id/css/layout.css instead of example.com/css/layout.css

RewriteRules not load some of css. js and images

With your shown samples/attempts, please try following htaccess Rules file.

Please make sure to clear your browser cache before testing your URLs.
Basically we need to place your rewrite rule for news.php under other rewrite rule.

Also making sure to disable MultiViews functionality in rules to make sure only exact contents are being found.

<IfModule mod_rewrite.c>
RewriteEngine On
Options +FollowSymlinks
Options -MultiViews

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/$1\.php -f [NC]
RewriteRule ^(.*)/?$ $1.php [QSA,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)/([^/]+)/([^/]+)/?$ news.php?newstype=$1&newsid=$2&newstitle=$3 [L,QSA,NC,B]

</IfModule>

URL rewrite issue not loading .css

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 /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ 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="/">

JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule

The "problem" is that you appear to be using relative URL-paths to your static resources (CSS, JS and images). So this is a client-side URL resolution issue. You should be using root-relative (starting with a slash) or absolute (with scheme + hostname) URLs to your assets so they can be located regardless of URL-path depth. (Note that any requests that your JS makes, eg. AJAX, should also be root-relative or absolute.)

The problem is not so much with .htaccess, but when you change the URL from /post.php?page=page_slug to /post/page_slug then any client-side relative URLs are going to resolve relative to /post/, not / (the document root) as before.

The request for the JS (and CSS) files result in a 404, so the 404 HTML error document is most probably being parsed as JS and failing (ie. "Uncaught SyntaxError: Unexpected token: '<'" - due to a <!DOCTYPE html> or opening <html> tag).

A possible workaround (to avoid changing your URLs) is to use a base HTML element in the head section to indicate what any relative URLs should be resolved relative to, overriding the URL of the current document. However, this has some additional caveats if you are using in-page anchors of the form href="#element" - since they will now be resolved relative to the document stated in the base element and not the current document.

See also my answer to the following question on the Webmasters stack that goes into more detail on this:

  • https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

.htaccess rewrite url remove CSS,JS,AND IMAGES Whatever i do its not working

Because you are rewriting rules, you need also to rewrite base href HTML, or just add the full url to your styles,js and images.
Example base href:

   <head>
<base href="https://www.yourwebsite.com/">
</head>


Related Topics



Leave a reply



Submit