Angular, Image Not Found (Get 404)

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.

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.

Can't find image on localhost, 404 error in angular

In service file, one change needs to be done. Triple equations (===) should be replaced by double (==).

@Injectable({
providedIn: 'root'
})
export class GetProfileImageUrl {
  profileImagefile: File;

  constructor(private sanitizer: DomSanitizer) {}

  profileImageUrlDefault() {
    return this.profileImagefile == null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
  }
}

an another change should be done in typescript file. Here profileImageUrlDefault function included in service file should be invoked as below.

get profileImageUrl() {
  return this.getImageUrl.profileImageUrlDefault();
}

This link provide you access to a live stackblitz environment, where solution is working properly after made above adjustments.

Hope this answer may be helpful.

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
}

Angular, image not found (GET 404) but it shows image after running ngbuild

Since you are using the static path as

app.use(express.static(path.join(__dirname,'dist/my-app')));

your image needs to be in dist/my-app/images folder instead of src/images to be able to access it without restarting the server.

You might need the logic to store the image in dist/my-app/images folder instead of src/images in production environment.

The reason why it is working after doing ng build is because it build the required file and copies all the images in the dist/my-app folder, so after doing ng build, new image is successfully copied in the dist folder, and thus it is available for your app.

Angular.js image 404 Not Found

instead of

<img src="{{c.icon}}" alt="{{c.name}}" ng-cloak>

you should use ng-src:

<img ng-src="{{c.icon}}" alt="{{c.name}}">

From ngSrc documentation:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

---

Related Topics