I'm currently working with Angular 4 and have encountered a 404 error when trying to display an image:
GET http://localhost:4200/photos/original/missing.png 404 (Not Found)
Error details:
- DefaultDomRenderer2.setProperty @ platform-browser.es5.js:2895
- AnimationRenderer.setProperty @ animations.es5.js:534
- DebugRenderer2.setProperty @ core.es5.js:13740
- setElementProperty @ core.es5.js:9401
(and more detailed steps...)
What could be causing this issue?
In my photo.service.ts file:
import {Injectable} from '@angular/core';
import {Photo} from '../../models/photo.model';
import {handleError} from "../../shared/functions";
import { AuthService } from '../auth/auth.service';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class PhotoService{
constructor(
private _authService:AuthService
){
}
getPhotos(){
return this._authService.get('photos')
.map(result => result.json())
}
}
Inside photo.component.ts:
import { Component, OnInit} from '@angular/core';
import { AuthService } from "../../../services/auth/auth.service";
import { PhotoService} from "../../../services/photo/photo.service";
import { Photo} from "../../../models/photo.model";
@Component({
selector: 'photo',
templateUrl: './photo.component.html',
styleUrls: ['./photo.component.scss'],
providers: [PhotoService]
})
export class PhotoComponent implements OnInit {
photos: Array<Photo>;
filteredPhotos =[];
constructor(
protected authService:AuthService,
private servPhoto: PhotoService
) {}
ngOnInit() {
this.loadPhotos();
}
private loadPhotos() {
let filteredPhotos;
if (this.servPhoto) {
this.servPhoto.getPhotos().subscribe(
photo => {
if(!this.authService.currentUserData) {
return;
}
this.photos = photo;
this.filteredPhotos = this.photos.filter(
(photo) => photo.users_id == this.authService.currentUserData.id
);
}
);
}
}
}
Within the photo.model.ts file:
export class Photo{
constructor(
public users_id: number,
public photo: Blob
) { }
}
For the photo.component.html file:
<div class="container-fluid" *ngIf="authService.currentUserData">
<img class="img" *ngFor="let photo of filteredPhotos" src="{{ photo.photo }}">
</div>
Lastly, here is the JSON data being used:
[{"users_id":36,"photo":"/photos/original/missing.png"},
{"users_id":1,"photo":"/photos/original/missing.png"},
{"users_id":1428,"photo":"/photos/original/missing.png"}]