The error “Failed to load resource: the server responded with a status of 404 (not found)” occurs when the browsers cannot load a static file from the server. In this post, I will explain and show you how to solve the error with some examples.
Why does the error “Failed to load resource: the server responded with a status of 404 (not found)” occurs?
The error “Failed to load resource: the server responded with a status of 404 (not found)” happens when the browsers cannot load a static file from the server. That’s maybe a JavaScript or CSS file you link to your HTML page, a source file of an image or an icon, or a file specified by an url to style text font or background image,…
The file cannot be loaded, that might be because it does not exist or is deleted, or you have some typo or use an incorrect path.
How to solve the error
To solve the error, you must ensure that the file exists and the path you use in your code is correct. The error message also shows you what file failed to load so that you can check for that file carefully.
To avoid using the wrong path, you need to understand the convention of HTML file paths. There are two ways to specify a path: relative file path and absolute file path.
With the relative path:
- Path “index.js” specifies the “index.js” file in the same folder as the current HTML page.
- Path “style/style.css” specifies the “style.css” file in the style folder, and the style folder is in the same folder as the current HTML page.
- Path “../favicon.svg” specifies the “favicon.svg” file in the parent folder of the current HTML page folder.
With the absolute path, you use a forward slash at the beginning of the path to specify the root of the server. The path “/icons/add.svg” links to the file “add.svg” that is in the icons folder at the root of the server.
Here are some examples to demonstrate common cases where you can get the error.
Example 1: Failed to load a JavaScript file
In this example, I link to the “index.js” file in the same folder of my HTML page, but the file does not exist, so I get the error “Failed to load resource: the server responded with a status of 404 (not found)”.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="index.js"></script>
</head>
<body>
Example 1: Failed to load a JavaScript file
</body>
</html>Output:
To avoid the problem, you need to check all files you specify in your code and make sure that you use the correct paths and files all exist. If you get the file from CDN or some online server, you can look for it again and try downloading the file before you use the url in your code.
Example 2: Failed to load an image source in <img> tag
Another common position where you can get the error is at the image source attribute.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Example 2: Failed to load an image source in <img> tag
<img src="assets/logo.png" alt="">
</body>
</html>Output:
In this case, examine where the logo file is located on the server. Maybe you need a forward slash at the beginning as “/assets/logo.png” if the assets folder is at the root folder of the server, or maybe the file is “logo.svg”, not “logo.png”. Let’s check for it carefully.
Example 3: Failed to load an image in a background-image style
Sometimes, you have the right path to link your CSS file in your code, but this file might contain some errors. For example, it can fail to load a font or background image file.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Example 3: Failed to load an image in a background-image style
</body>
</html>body {
background-image: url("/images/background.jpg");
}Output:
Summary
In this post, I showed you some examples to explain the error “Failed to load resource: the server responded with a status of 404 (not found)”. To avoid the error, please make sure that you use the right path or url in all of your code: the links inside the <head> tag, the source of <img> tags, the url in the CSS file,…
Maybe you are interested:
- “forEach is not a function”
- Error: Cannot find module ‘node-sass’
- TypeError: indexOf is not a function in JavaScript
- Identifier has already been declared Error in JavaScript
Hello, I’m Joseph Stanley. My major is IT and I want to share programming languages to you. If you have difficulty with JavaScript, TypeScript, C#, Python, C, C++, Java, let’s follow my articles. They are helpful for you.
Job: Developer
Name of the university: HUST
Major: IT
Programming Languages: JavaScript, TypeScript, C#, Python, C, C++, Java
