Как отобразить загруженное изображение ajax на html в angularjs cli - PullRequest
Новая
       9

Как отобразить загруженное изображение ajax на html в angularjs cli

0 голосов
/ 31 августа 2018

Я работаю над угловым 6. Я загрузил пользовательские данные json и хочу отобразить фотографию профиля, но она показывает ноль. как решить эту проблему

userprofile.component.js 

import { Component, OnInit } from '@angular/core';
import { UserService } from '../service/user.service'; 
import { User } from '../model/User'; 

@Component({
  selector: 'app-sidenav',
  templateUrl: './userprofile.component.html',
  styleUrls: ['./userprofile.component.scss'],
  providers: [UserService]
})
export class SidenavComponent implements OnInit {
  public $auth: User; 
  constructor(public _user: UserService) {}

  ngOnInit() {
   this._user.authUser().subscribe(
      result => {
        this.$auth = result; 
      }
    )

} }

userprofile.component.html 

<img [src]="'http://clinic.com/img/'+$auth.profile_pic" />

user.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { User } from '../model/User'; 
import { Pagination } from '../model/Pagination'; 

@Injectable({
  providedIn: 'root'
})
export class UserService {

  public root = "http://clinic.com"; 
  constructor(public http:HttpClient) { }


  authUser(): Observable<User>{
    let $url = this.root+"/ajax/get/auth user"
    return this.http.get<User>($url); 
  }
}

** пользовательская модель **

export class User {
  constructor(
    public id: number,
    public worker_id: string,
    public first_name: string,
    public father_name: string,
    public grand_father_name: string,
    public gender: string,
    public role_id: number,
    public email: string,
    public phone: string,
    public role?: number,
    public profile_pic?: string,
    public isFirstTime?: number,
    public created_at?: string,
    public updated_at?: string ){}

}

** ответ JSON, если вы заинтересованы **

{
"id": 1,
"worker_id": "Admin",
"first_name": "Eba",
"father_name": "Aleamyehu",
"grand_father_name": "Tufa",
"email": "ebaaleamyhu3@gmail.com",
"phone": "091086788",
"gender": "Male",
"role_id": 1,
"isFirstTime": 1,
"profile_pic": "avatar.jpg",
"deleted_at": null,
"created_at": null,
"updated_at": null
}

Так в чем же проблема с этим кодом или как лучше всего загрузить изображение?

1 Ответ

0 голосов
/ 31 августа 2018

Вы должны создать на компоненте: 

Public avatarUrl: string;

На html: 

<img [src]="avatarUrl">

И наконец: 

    ngOnInit() { this._user.authUser().subscribe( result => { this.$auth = result;
this.avatarUrl = 'http://clinic.com/img/'+result.profile_pic } )
...