Image not loading for 404 error page due to CSS issue

There is a unique 404 page on example.co.in located at example.co.in/errors/404.html.

When attempting to access a non-existent page within the errors directory, such as example.co.in/errors/baba (which does not exist), the proper 404 page displays. However, when trying the same with a nonexistent page from a different directory or above, the page loads but the image fails to load.

The image and the 404.html page are both located in the errors directory.

<img src="rajni.jpg">

If the image is moved to the main HTML directory (www), it works fine. The question remains: why does example.co.in/errors/baba work while example.co.in/baba does not?

EDIT: Please note that the links have been changed and may not function due to an SEO issue.

Answer №1

You are using a relative path for the <img> element's src. The image is located at /errors/rajni.jpg, so it will only load if the path is within the /errors directory. To resolve this issue, simply update the src attribute as follows:

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

The way Apache serves the content differs from how the browser requests it. When the browser tries to download a resource like an image, it sends a separate HTTP request for each file. For example, it may first request /not/a/page, and Apache responds with an HTTP 404 error indicating that the page doesn't exist in that location. Then, the browser parses the HTML, finds src=rajni.jpg, and sends another request for /not/a/page/rajni.jpg. Once again, Apache returns a 404 error as the image is not found.

Answer №2

Please make use of the line below:

<img src="http://example.co.in/errors/rajni.jpg">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can MUI 5 replicate the Emotions 'css' function through analog?

From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...

Adjust the dimensions of an SVG element using CSS within an li element's ::before pseudo-element

I'm working on a list where SVGs are loaded as list items. How can I adjust the height and width of the ::before pseudo-element to be 30px x 30px? Setting the height and width directly didn't work for me. Can someone assist with this? <div cl ...

How to position radio buttons in line with labels containing inline inputs using Vue and Bootstrap

Currently, I am facing an issue with my form containing a radio button group where one of the radio button labels includes another numerical input. The layout is not aligned correctly, and I am struggling to adjust the spacing using CSS. I am unable to gr ...

What steps do I need to take in order to change an HTML div's background to a black

My current project involves dynamically loading HTML content stored on disk into a specific div element. This is achieved by using the following code: $('#FictionContent').load('Content/HuckFinn.html'); Just to provide some background ...

What is the best way to control the overflow length and display only a specific amount of content at once?

I am currently designing the homepage for a social media platform. I have around 45 dummy posts and I am looking for a way to limit the overflow in CSS so that only 5 posts are displayed at a time. Once the user reaches the bottom of those 5 posts, another ...

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

Hexa-Responsive Menu - A Unique Approach

Currently, I am working on developing a Hexagon menu specifically for mobile applications. My latest progress can be viewed at JSFiddle. The main challenges that I am encountering are: Ensuring that the Hexagon menu remains responsive and always stays c ...

Strategies for aligning a link on top of another div with absolute positioning

Looking for some assistance with my HTML and CSS code. Specifically, I need the position of the #header id to be set as absolute: <div class="main"> <a href="www.website.com"> <div id="header" class="other"> </div> #heade ...

A single element out of place due to CSS positioning (while the rest are perfectly aligned)

I have successfully positioned all of my HTML elements as desired, with the exception of one. Despite my efforts, I cannot figure out why this particular element is not cooperating with the rest. Below is a snippet of the CSS code excluding non-relevant pa ...

Conceal the Div containing the specified class

I was hoping to hide the first DIV if the second DIV is displayed on the front end, and vice versa upon page load. If the first DIV is set to 'block,' then the second DIV should be set to 'none.' And If the second DIV is set to &apos ...

Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute ...

Can anyone suggest a stellar sprite generator for me?

I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...

A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side. The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme ...

The final line of inline-block divs veers towards the right

After extensive searching on Google and Stack Overflow, I am still struggling to resolve this particular issue. The frustration is growing exponentially, and it's starting to drive me a little insane! The problem lies within my menu structure, which ...

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

The iframe on my WordPress website is not displaying at its full size as intended

Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly. Using padd ...

Searchbox aligned to the right using Bootstrap

Looking to place a searchbox on the right next to another container aligned left: <div> <div class="pull-left"><span>SOME TEXT</span></div> <div class="pull-right"> <div class="row"> ...

What could be causing my bootstrap 3.7 carousel to not function properly?

I've been trying to implement this feature of bootstrap by following a guide, but I can't seem to figure out why it's not working. I have all the CDNs and Js Script linked in my header, directly copied from the bootstrap website. <div id ...