Angular: Image files could not be loaded due to a 404 error (Not Found)

After downloading this free theme, I tried to use it in my Angular project within WebStorm. However, I encountered this error message: 

Failed to load resource: the server responded with a status of 404 (Not Found)
and despite having the correct path, no images were loaded. Can anyone offer assistance?

Below is a snippet of the code:

 <a class="navbar-brand brand-logo" href="index.html"><img src="images/logo.svg" alt="logo"/></a>
      <a class="navbar-brand brand-logo-mini" href="index.html"><img src="images/logo-mini.svg" alt="logo"/></a>

Preview of Actual Output

Directory Tree Structure

Note: While I have resolved issues with loading CSS and JavaScript files by modifying link types, I wonder if the problem might be related to JSON. Any thoughts on this?

htmlcssjsonbootstrap-4

Answer №1

To resolve the problem, I successfully resolved it by relocating images to the assets directory in Angular. Initially, I had placed them in the app folder and encountered a 404 error. However, moving them to the assets folder fixed the issue. Now, I access them using this code:

<img src="assets/images/intro_room.jpg" alt="Intro Gallery Room Sample Pictures">

Answer №2

One helpful tip is to begin your image URL with /, such as /graphics/banner.jpg

Answer №3

If you have a folder named "pictures" and a file called home.html in the same location, the correct path would begin with ./

<img src="./pictures/nature.jpg" alt="nature"/>

Answer №4

Make sure to include the route in the angular.json file under architect > build > options > assets:

"assets": ["src/favicon.ico", "src/assets", "src/images"]

Once this is done, be sure to stop and restart your application.

Answer №5

Here's the solution: To make sure your image directory works in Angular, you need to add the route in angular.json under architect > build > options > assets:

"assets": ["src/favicon.ico", "src/assets", "src/images"]

Don't forget to stop and relaunch your app after making this change.

According to Ivan Gomez, this is the correct answer that worked perfectly for me. The key reason why the image directory wasn't functioning was because Angular didn't recognize it as an asset directory. While adding images to the asset folder is one way to do it, if you prefer to have a separate image folder, follow Ivan's instructions and update the angular.json file accordingly.

Answer №6

It is uncertain what exactly is stored in the assets directory, however, it is advisable to organize static files such as CSS and images within this dedicated directory.

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

Ensure that the browser is instructed to utilize a designated Accept field within the HTTP request

Can a web browser be directed to use a specific mime-type in an HTML request? For example, can we achieve this with the following code: <a type="application/pdf" href="https://url.com/">PDF</a> or <a type="text/html ...

htmlhttpwebmime-types

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...

javascriptcss

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas

Building a floating video player using React

I recently installed the React-Player module and it is functioning perfectly. However, I am encountering some difficulties in trying to embed the player within an Element so that it appears as a floating player across my application, regardless of the page ...

javascriptcssreactjsreact-player

Looking for a way to make a button glide down to the bottom of a card in a

I need to ensure that the contact button in each card floats to the bottom, regardless of the amount of text within the card. This will create a uniform appearance with all cards having the contact button in the same position. Here is an example of how on ...

cssformattingpug

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

Tips for accessing various JSON objects from a JSON document

My task involves extracting specific information from a JSON file using AJAX and jQuery. The structure of my JSON data is as follows: "Footwear": { "Adidas": [ { "id" : 0, &q ...

javascriptjqueryjsonajax

Struggling with passing values to onClickHandler because of MUI

I'm looking to create a category navigation menu that includes icons and labels. I attempted to do this using Chips: {categories.map((category) => ( <Chip key={category._id} ...

javascriptcssreactjsmaterial-ui

How can I close the sidebar with a single tap anywhere outside of it?

Is there a way to hide the sidebar when clicking anywhere on the screen? Can I show text when hovering over an image instead of having it always visible? function openNav() { document.getElementById("mySidenav").style.width = "300px"; document.getE ...

javascripthtmlcss

What is the best way to retrieve and display a detailed JSON object within views using Node.js?

Below is a snippet of code that deals with JSON arrays and how to handle them in a server setting. When sending data from the server, the code constructs a URL based on certain parameters and makes a request. If successful, it then logs the response and e ...

javascriptjsonnode.jspug

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Using the jQuery function .before(), I am creating an element in this format: d.children().first().before("<div class='test-div'><span class='test-span'>" + text + "</span></div>") I want to style the span dyna ...

jqueryhtmlcss

Utilizing jq for JSON within Jenkins' command line

I ran the command jq -r '.version' package.json in my terminal to extract the version from the package.json file. Is it possible to utilize the jq command in a Jenkins shell without having to install it locally? ...

node.jsjsonshelljenkinsnpm

Using jQuery, identify when a key has been pressed within a three.js environment

How can I detect a keypress within a designated scene contained in a div with the id "world"? I've written the following code in an attempt to achieve this, but it doesn't seem to be working properly. Here is the code snippet: $('world&apos ...

javascriptjqueryhtmlthree.jskeydown

Executing a function when a dropdown in Bootstrap is expanded and closed

How can I use JavaScript to execute a function when clicking on a notification button in a Bootstrap navbar to expand the dropdown, and then close the dropdown when clicking it again? I have tried selecting the dropdown and modifying the click function, b ...

javascripthtmljquerycssbootstrap-5

displaying and activating element using jQuery

I'm currently working on setting up a notification system for my website but seem to be encountering some issues that I can't quite pinpoint. Essentially, I have a link that triggers a JavaScript function upon being clicked. This function is mean ...

javascriptjqueryhtml

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

After implementing a Button from MUIv5, I noticed that the full animation only triggers when I hold down the button instead of with a simple click. Is there a way to fix this so that the animation fully plays with just a single click? Any help is apprecia ...

cssreactjsmaterial-uicss-transitionsjss

JSON schema - validating objects with consistent data types

After generating this JSON structure: { "someString" : "example", "obj1" : { "opt1" : 1, "opt2" : 1, "opt3" : "aaa" }, "obj2" : { "opt1" : 55, "opt2" : 55, "opt3" : "bbb" } } I anticipate there will be additional object ...

jsonnode.jsjsonschema

Storing data from a massive JSON array into a separate array using a specific condition in JavaScript

Dealing with a large JSON array can be challenging. In this case, I am looking to extract specific objects from the array based on a condition - each object should have "dbstatus":-3. data = [{"id":"122","dbstatus":-3},{"id":"123","dbstatus":"-6"},{"id" ...

javascriptarraysjson

Using PHP to swap out HTML elements

I need a solution to display text with HTML tags as plain text, without the browser interpreting them. I want the output to be similar to how HTML code viewers render it. For example: replacing <div> with <span><</span><span>d&l ...

phphtmltags

Update CSS using onChange event with an array of values

I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty i ...

jquerycssarraysappend