woofmeow woofmeow - 1 month ago 11
CSS Question

CSS image doesn't load for 404 page

The page at example.co.in has a custom 404 page located at example.co.in/errors/404.html.

When I try accessing a non existent page from within the errors directory like this example.co.in/errors/baba (this page doesnt exist) I get the proper 404 page. However when I try to access a nonexistent page from a directory above or from any other directory I get the page but the image doesnt load.

The image is located in the errors directory same as the 404.html page.

<img src="rajni.jpg">


If I put the image in the main html directory (www) it works perfectly fine. The question is why does example.co.in/errors/baba work and example.co.in/baba not work?

EDIT: The links have been changed and wont work because of an SEO problem.

Answer

You have a relative path to the <img> src. The actual image is at /errors/rajni.jpg. Thus the image will only load if the path is in /errors. To fix this, simply change the src:

<img src="/errors/rajni.jpg">

How apache serves it is different than how the browser requests it. The browser must make a separate HTTP request for every resource it downloads including the image. It makes one request to /not/a/page. Apache sees /not/a/page and returnsHTTP: 404; html=(basically). The browser parses HTML, displays, and seessrc=rajni.jpg. Then it makes another request:GET HTTP 1.1 /not/a/page/rajni.jpg`. Apache is happy to respond with another 404

Comments