How to properly implement “photo.service”?

2
votes

I'm using Angular 4. And when I try to output an image, there is a 404 error:

GET http://localhost:4200/photos/original/missing.png 404 (Not Found)

Image (async)
DefaultDomRenderer2.setProperty @ platform-browser.es5.js:2895 AnimationRenderer.setProperty @ animations.es5.js:534 DebugRenderer2.setProperty @ core.es5.js:13740 setElementProperty @ core.es5.js:9401 checkAndUpdateElementValue @ core.es5.js:9320 checkAndUpdateElementInline @ core.es5.js:9254 checkAndUpdateNodeInline @ core.es5.js:12337 checkAndUpdateNode @ core.es5.js:12284 debugCheckAndUpdateNode @ core.es5.js:13141 debugCheckRenderNodeFn @ core.es5.js:13120 (anonymous) @ ProfileComponent.html:8 debugUpdateRenderer @ core.es5.js:13105 checkAndUpdateView @ core.es5.js:12256 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execComponentViewsAction @ core.es5.js:12531 checkAndUpdateView @ core.es5.js:12257 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execComponentViewsAction @ core.es5.js:12531 checkAndUpdateView @ core.es5.js:12257 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execComponentViewsAction @ core.es5.js:12531 checkAndUpdateView @ core.es5.js:12257 callWithDebugContext @ core.es5.js:13467 debugCheckAndUpdateView @ core.es5.js:13007 ViewRef_.detectChanges @ core.es5.js:10174 (anonymous) @ core.es5.js:4812 ApplicationRef_.tick @ core.es5.js:4812 (anonymous) @ core.es5.js:4684 ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.es5.js:3890 ZoneDelegate.invoke @ zone.js:387 Zone.run @ zone.js:138 NgZone.run @ core.es5.js:3821 next @ core.es5.js:4684 schedulerFn @ core.es5.js:3635 SafeSubscriber.tryOrUnsub @ Subscriber.js:238 SafeSubscriber.next @ Subscriber.js:185 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ core.es5.js:3621 checkStable @ core.es5.js:3855 onLeave @ core.es5.js:3934 onInvokeTask @ core.es5.js:3884 ZoneDelegate.invokeTask @ zone.js:420 Zone.runTask @ zone.js:188 ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566 error (async)
customScheduleGlobal @ zone.js:1666 ZoneDelegate.scheduleTask @ zone.js:407 onScheduleTask @ zone.js:297 ZoneDelegate.scheduleTask @ zone.js:401 Zone.scheduleTask @ zone.js:232 Zone.scheduleEventTask @ zone.js:258 (anonymous) @ zone.js:1831 (anonymous) @ http.es5.js:1274 Observable._trySubscribe @ Observable.js:171 Observable.subscribe @ Observable.js:159 ConnectableObservable.connect @ ConnectableObservable.js:39 RefCountOperator.call @ ConnectableObservable.js:108 Observable.subscribe @ Observable.js:156 AuthService._handleResponse @ auth.service.ts:592 AuthService.request @ auth.service.ts:574 AuthService.get @ auth.service.ts:498 PhotoService.getPhotos @ photo.service.ts:15 ProfileComponent.loadPhotos @ profile.component.ts:78 ProfileComponent.ngOnInit @ profile.component.ts:62 checkAndUpdateDirectiveInline @ core.es5.js:10843 checkAndUpdateNodeInline @ core.es5.js:12341 checkAndUpdateNode @ core.es5.js:12284 debugCheckAndUpdateNode @ core.es5.js:13141 debugCheckDirectivesFn @ core.es5.js:13082 (anonymous) @ ProfileComponent_Host.html:1 debugUpdateDirectives @ core.es5.js:13067 checkAndUpdateView @ core.es5.js:12251 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execComponentViewsAction @ core.es5.js:12531 checkAndUpdateView @ core.es5.js:12257 callViewAction @ core.es5.js:12599 execEmbeddedViewsAction @ core.es5.js:12557 checkAndUpdateView @ core.es5.js:12252 callViewAction @ core.es5.js:12599 execComponentViewsAction @ core.es5.js:12531 checkAndUpdateView @ core.es5.js:12257 callWithDebugContext @ core.es5.js:13467 debugCheckAndUpdateView @ core.es5.js:13007 ViewRef_.detectChanges @ core.es5.js:10174 (anonymous) @ core.es5.js:4812 ApplicationRef_.tick @ core.es5.js:4812 (anonymous) @ core.es5.js:4684 ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.es5.js:3890 ZoneDelegate.invoke @ zone.js:387 Zone.run @ zone.js:138 NgZone.run @ core.es5.js:3821 next @ core.es5.js:4684 schedulerFn @ core.es5.js:3635 SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 SafeSubscriber.next @ Subscriber.js:185 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ core.es5.js:3621 checkStable @ core.es5.js:3855 onHasTask @ core.es5.js:3903 ZoneDelegate.hasTask @ zone.js:441 ZoneDelegate._updateTaskCount @ zone.js:461 Zone.updateTaskCount @ zone.js:285 Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async)
scheduleMicroTask @ zone.js:578 ZoneDelegate.scheduleTask @ zone.js:410 Zone.scheduleTask @ zone.js:232 Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 PlatformRef.bootstrapModuleWithZone @ core.es5.js:4537 PlatformRef.bootstrapModule @ core.es5.js:4522 (anonymous) @ main.ts:11 ./src/main.ts @ main.bundle.js:1057 __webpack_require @ inline.bundle.js:55 0 @ main.bundle.js:1065 webpack_require @ inline.bundle.js:55 webpackJsonpCallback @ inline.bundle.js:26 (anonymous) @ main.bundle.js:1

What have I done wrong?

photo.service.ts:

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())  
    }

}

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
          );
        }
      );
    }
  }

}

photo.model.ts:

export class Photo{
    constructor(
        public users_id: number,
        public photo: Blob
    ) { }
}

photo.component.html:

<div class="container-fluid" *ngIf="authService.currentUserData">
   <img class="img" *ngFor="let photo of filteredPhotos" src="{{ photo.photo }}">
</div>

And here is the JSON itself:

[{"users_id":36,"photo":"/photos/original/missing.png"},

{"users_id":1,"photo":"/photos/original/missing.png"},

{"users_id":1428,"photo":"/photos/original/missing.png"}]
4
angulartypescript
can you post angular.json or angular-cli.json file as well? - Sanoj_V
@Sanoj_V posted - user10254427
Please check i have posted an answer look there - Sanoj_V
404 means file not found. You didn't get the correct URL for your photos. Maybe try adding assets before your sources in your JSON, the CLI usually creates an assets folder when you create a new project. - user4676340

4 Answers

0
votes

You have src="{{ photo.photo }} and your JSON has "photo":"/photos/original/missing.png"

Your error: GET http://localhost:4200/photos/original/missing.png 404 (Not Found) is simply telling you the photo doesn't exist.

What have I done wrong?

Nothing wrong. The code is simply trying to load the image that isn't present. If you want the 404 to go away make sure an image is present at the mentioned url provided by the JSON.

0
votes

I think your service is giving out json while your class is expecting a Blob data type.

0
votes

Try like this:

If you are getting proper response in filteredPhotos

<div *ngIf="authService.currentUserData">
<div class="container-fluid" *ngFor="let photo of filteredPhotos" >
   <img class="img"  [src]="photo.photo">
</div>
</div>
0
votes

You need to locate folder inside angular.json or angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "photos"   //<==== you have to add this folder source here     
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
        "./assets/sass/material-style.scss",
        "./assets/css/style.css",
        "../node_modules/primeicons/primeicons.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/quill/dist/quill.core.css",
        "../node_modules/quill/dist/quill.snow.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/quill/dist/quill.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js",
        "../node_modules/arrive/src/arrive.js",
        "../node_modules/chart.js/dist/Chart.js",
        "../node_modules/moment/moment.js",
        "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
        "../node_modules/bootstrap-notify/bootstrap-notify.js",
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  },
  "warnings": {
    "typescriptMismatch": false
  }
}

then stop your ng or npm and run again.

Now ng serve or npm start This solve your problem