如何正确实施“photo.service”？

Posted 2023-03-13

【中文标题】如何正确实施“photo.service”？

【英文标题】：How to properly implement "photo.service"?

【发布时间】：2019-02-01 14:22:03

【问题描述】：

我使用的是 Angular 4。当我尝试输出图像时，出现 404 错误：

GET http://localhost:4200/photos/original/missing.png 404（未找到）

图像（异步） DefaultDomRenderer2.setProperty@platform-b​​rowser.es5.js:2895 [e-mail]:534 [e-mail]:13740 [e-mail]:9401 [e-mail]:9320 [e-mail]:9254 [e-mail]:12337 [e-mail]:12284 [e-mail]:13141 debugCheckRenderNodeFn @ core.es5.js:13120 （匿名）@ ProfileComponent.html:8 [e-mail]:13105 [e-mail]:12256 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12531 [e-mail]:12257 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12531 [e-mail]:12257 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12531 [e-mail]:12257 [e-mail]:13467 [e-mail]:13007 [e-mail]:10174 （匿名）@core.es5.js:4812 [e-mail]:4812 （匿名）@core.es5.js:4684 [e-mail]:388 [e-mail]:3890 [e-mail]:387 [e-mail]:138 [e-mail]:3821 下一个@core.es5.js:4684 [e-mail]:3635 SafeSubscriber.tryOrUnsub @Subscriber.js:238 [e-mail]:185 订阅者._next @订阅者.js:125 订阅者.next @订阅者.js：89主题.下一个@主题.js：55 [e-mail]:3621 [e-mail]:3855 [e-mail]:3934 [e-mail]:3884 [e-mail]:420 [e-mail]:188 [e-mail]:496 [e-mail]:1540 globalZoneAwareCallback @ zone.js:1566 错误（异步） [e-mail]:1666 [e-mail]:407 [e-mail]:297 [e-mail]:401 [e-mail]:232 [e-mail]:258 （匿名）@ zone.js:1831 （匿名）@ http.es5.js:1274 [e-mail]:171 [e-mail]:159 [e-mail]:39 [e-mail]:108 [e-mail]:156 [e-mail]:592 [e-mail]:574 [e-mail]:498 [e-mail]:15 [e-mail]:78 ProfileComponent.ngOnInit @ profile.component.ts:62 [e-mail]:10843 [e-mail]:12341 [e-mail]:12284 [e-mail]:13141 [e-mail]:13082 （匿名）@ ProfileComponent_Host.html:1 debugUpdateDirectives @ core.es5.js:13067 [e-mail]:12251 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12531 [e-mail]:12257 [e-mail]:12599 [e-mail]:12557 [e-mail]:12252 [e-mail]:12599 [e-mail]:12531 [e-mail]:12257 [e-mail]:13467 [e-mail]:13007 [e-mail]:10174 （匿名）@core.es5.js:4812 [e-mail]:4812 （匿名）@core.es5.js:4684 [e-mail]:388 [e-mail]:3890 [e-mail]:387 [e-mail]:138 [e-mail]:3821 下一个@core.es5.js:4684 [e-mail]:3635 [e-mail]:238 [e-mail]:185 订阅者._next @订阅者.js:125 订阅者.next @订阅者.js：89主题.下一个@主题.js：55 [e-mail]:3621 [e-mail]:3855 [e-mail]:3903 [e-mail]:441 ZoneDelegate._updateTaskCount @ zone.js:461 Zone.updateTaskCount @ zone.js:285 Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) [e-mail]:578 [e-mail]:410 [e-mail]:232 [e-mail]:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 PlatformRef.bootstrapModuleWithZone @ core.es5.js:4537 [e-mail]:4522 （匿名）@main.ts:11 ./src/[e-mail]:1057 __webpack_require @ inline.bundle.js:55 0 @ main.bundle.js:1065 webpack_require @ inline.bundle.js:55 webpackJsonpCallback @ inline.bundle.js:26 （匿名）@main.bundle.js:1

我做错了什么？

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

照片.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>

这是 JSON 本身：

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

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

"users_id":1428,"photo":"/photos/original/missing.png"]

【问题讨论】：

你也可以发布 angular.json 或 angular-cli.json 文件吗？

@Sanoj_V 发布

请检查我已经发布了一个答案看看那里

404 表示找不到文件。您没有获得照片的正确 URL。也许尝试在 JSON 中的源代码之前添加 assets，CLI 通常会在您创建新项目时创建一个资产文件夹。

【参考方案1】：

你有src=" photo.photo ，你的JSON有"photo":"/photos/original/missing.png"

您的错误：GET http://localhost:4200/photos/original/missing.png 404 (Not Found) 只是告诉您照片不存在。

我做错了什么？

没有错误。该代码只是试图加载不存在的图像。如果您希望 404 消失，请确保 JSON 提供的上述 url 中存在图像。

【讨论】：

但是那里有一张图片

【参考方案2】：

我认为您的服务正在提供 json，而您的课程需要 Blob 数据类型。

【讨论】：

如果图片是“Blob”格式，你建议我怎么做？

您可以尝试将 json 输出转换为 Blob。类似***.com/questions/12786818/file-api-blob-to-json

【参考方案3】：

试试这样：

如果您在filteredPhotos 中得到正确回复

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

【讨论】：

您是否以文件形式收到响应？？ localhost:4200/photos/original/missing.png??

所以问题是您没有在系统上下载文件

我得到的答案是“text/html”

应该是“image/png”

我不明白“所以问题是您没有在系统上下载文件”

【参考方案4】：

您需要在 angular.json 或 angular-cli.json 文件中找到文件夹。

  "$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
  

然后停止您的 ng 或 npm 并再次运行。

现在 ng serve 或 npm start 这解决了你的问题

【讨论】：

@user10254427 你检查了吗？？