Angular:Failed to Load Images: 404 (Not Found)

GET Request for Image to Angular Component returns 404 Not Found

The Mistake: The Angular Component cannot find any folder named 'public' to access images because I have not specified any path to that folder to be accessed in my server.js.

The Solution: Add the following line of code:

app.use('/public', express.static(path.join('public')));

This line ensures that with the url http://localhost:3000/ I can access the public folder. Otherwise it was simply set up for serving static files.

Angular, image not found (GET 404)

@Parth Ghiya commented the answer to my question. I had to put the image to the /src/assets folder. Angular is now able to find the image.

Angular library 404 loading.gif not found

In angular.json, you can extract assets from your lib and re-expose them in your project. Syntax is :

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/my-dependency/assets",
    "output": "./my-dependency-assets/"
  },

Of course, you can decide to expose them in ./assets instead of ./my-dependency-assets but I would not mix the app assets with the library assets as it will be a headache in case of homonym assets.

For example, in hive-commons you can rename the assets folder to hive-assets to that all your library components point to assets urls such as ./hive-assets/path/to/image.png.

Then, in your main app, you remap dist/hive-commons/hive-assets to hive-assets

Newly uploaded photo giving 404 error. If I stop then run website, image loads

I wound up resolving this issue by using an S3 bucket, I realized once I put my website on a server I would no longer be able to access the file paths to store the photo. The tutorials I followed to resolve my issue are here:

Part 1: https://youtu.be/ynhgDYVQTEI
Part 2: https://youtu.be/hJFxhVpA9To
Part 3: https://youtu.be/eRUjPrMMhCc

Angular image 404 fallback

sory, but there is no way to prevent these errors from leaking to console.

I would recommend you to use @HostListener to not to attach event listeners by hand.

@HostListener('error', ['$event.target'])
onError(imgElement) {
  // your logic
}