How to rewrite the images path according to the written rules of the url?

Question

I am trying to rewrite the url of an application with parameters.
I have a link in the main file main.php .

<a href="index?id=100&title=sub-url-here>Continue</a>

In the index.php file, there is an image tag with the src pointing to ìmages/ folder.

<img src="images/fileaname.png" />

All this works just fine.

The problem occurs after writing the URL.
This is what I have in the .htaccess file

RewriteEngine O

RewriteRule ^index/([0-9]+)/([0-9a-zA-Z-_]+)/?$ index.php?id=$1&title=$2 [NC,L]

I now have in the index.php file:

<a href="index/100/sub-url-here/">Continue</a>

However, the image path in the main.php file is now pointing to

<img src="100/sub-url-here/images/fileaname.png" />

How can I rewrite the image path according to the written url in the .htaccess ?

Answer 1

The problem is you are using relative URLs to your images. The browser resolves these relative to the current URL. So, when viewing the page URL /index/100/sub-url-here/ the relative URL images/filename.png naturally resolves to index/100/sub-url-here/images/filename.png .

You need to use root-relative URLs (starting with a slash) or absolute URLs (with scheme+hostname) to your images (and other static resources).

ie.

 <img src="/images/filename.png">

See also, the following question on the Webmasters stack that goes into more detail:

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