How Can .htaccess Rules Solve CSS, JS, and Image Loading Problems After URL Rewriting?

URL Rewriting: Resolving CSS, JS, and Image Loading Issues

When implementing URL rewriting using .htaccess rules, it's common to encounter issues where CSS, JS, and images fail to load after redirecting. One potential reason is that relative URIs have their base modified due to the redirect.

One suggested solution involves using absolute paths for the CSS and JS files, however this approach may be inconvenient as it requires manual changes to all files. An alternative solution based on .htaccess rules can resolve this issue:

RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteRule ^detail/([0-9]+)/?$ detail.php?id=
RewriteRule ^(css/.*|js/.*|img/.*)$  [L]

This rule ensures that direct requests for CSS, JS, and images are handled separately and their relative paths remain intact. The rule includes the following sections:

• RewriteBase /: Sets the base directory for all rewrite rules.
• RewriteCond %{REQUEST_FILENAME} -f [OR]: Checks if the requested file exists.
• RewriteRule ^detail/([0-9] )/?$ detail.php?id=$1: Redirects requests for URLs in the format "/detail/123" to "detail.php?id=123".
• RewriteRule ^(css/.|js/.|img/.*)$ $1 [L]: Matches direct requests for CSS, JS, and image files and leaves their URIs unchanged.

By implementing this solution, relative paths for CSS, JS, and images are preserved, ensuring that these resources load correctly even after the redirect.

The above is the detailed content of How Can .htaccess Rules Solve CSS, JS, and Image Loading Problems After URL Rewriting?. For more information, please follow other related articles on the PHP Chinese website!