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

Question

I'm having trouble with css and images loading the moment my url ends in a /. I'm working off my localhost and the urls are rewritten in the form:

localhost/mysite/public/user/testuser/books/1234

With the request loading the user profile page of testuser and changing the page state to focus on a book with the id 1234.

Everything works fine with localhost/mysite/public/user, but the moment I introduce a / or /testuser to the url the CSS, JS, and Images break. I do have url rewriting in place and read a number of posts that state its a .htaccess rewrite problem. Here is the structure of my site:

mysite/
    app/
        controllers/
        models/
        etc...
    public/
        css/
            styles.css
        images/
            profilepic.png
        js/
    index.php

All images, js, and css are referenced via relative path: ex: ../public/css/styles.css.

Contents of .htaccess are:

Options -MultiViews
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

I read a mix of solutions including changing all the paths to absolute or changing them to /css/styles.css for example. Absolute of course works, but that doesn't make sense when I move the site to its actual domain I would need to change every instance.

There was also a note about excluding css, jpeg, etc... files from the rewrite using:

RewriteCond %{REQUEST_URI} !^.*\.(css|jpe?g|gif|png|js|ico)$ [NC]

Unfortunately none of these options worked and I'm not sure where else I should look. Any ideas?

Possible duplicate of Seo Friendly Url css img js not working — Amit Verma
– Amit Verma, Commented Jul 6, 2016 at 0:24
Yes, thank you. That did the trick. I've never come across an actual implementation of <base>. Which makes me wonder what some of the larger sites are doing to address this that have a similar url rewrite. — Runicode
– Runicode, Commented Jul 7, 2016 at 18:05
@Runicode well to answer your question. Most large sites use absolute paths. Reason being is as a site gets very large and depending on if it uses cookies, most sites uses CDNS or separate domains to host their assets, All the big sites do so because it's best practice. They are using the full URL of the CDN or the asset domain. Just view the source of some big sites to see. Like Stackoverflow http://cdn.sstatic.net/Js/stub.en.js?v=da42df2f72e3 — Panama Jack
– Panama Jack, Commented Jul 8, 2016 at 4:35

Panama Jack · Accepted Answer · 2016-07-05 22:53:58Z

3

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.

answered Jul 5, 2016 at 22:53

Panama Jack

24.6k11 gold badges65 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related