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
}
Related Topics
Html5 Number Input - Always Show 2 Decimal Places
How to Open a Link in New Tab Using Angular
Provide an Image for Whatsapp Link Sharing
How to Disable a Checkbox Based on Conditions in Angular 6
Select Option Padding Not Working in Chrome
How to Set Filename for Base64 Rendered Pdf Using Object Tag
How to Disable Auto-Play for Local Video in Iframe
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
Browsers Try to Download HTML File Instead of Opening
Limit Number of Digits After Decimals in Text Input
Directory Chooser in HTML Page
Angular 6 Component Not Showing Up
How to Force Div Contents to Stay in One Line With HTML and CSS
Disable Certain Dates from Html5 Datepicker
Change Arrow Colors in Bootstraps Carousel