How to display the image in the template from assets


#1

I have tried to display the image from assets folder in POSTMAN like this:

It worked, The same image i am trying to display in the template but i couldn’t.

Below is the CODE what i tried:

services file

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
 private assetsUrl = 'http://....my squidex url........./api';
 public authKey = '.....auth_key.....';

  constructor(private http: HttpClient) { }

  public async allAssets(){
    const apiUrl = `${this.assetsUrl}/assets/3bd7519d-a721-444b-b86d-7aa263876617`;
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/json');
    headers = headers.set('Authorization', this.authKey);
    return this.http.get(apiUrl, { headers }).toPromise();
  }

}

.ts file

import { Component, OnInit } from '@angular/core';
import { MyService} from 'src/app/services/my.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
   public picture: any;

  constructor(public myService: MyService) { }
  
  public async ngOnInit(): Promise<void> {
this.picture = await this.myService.allAssets();
  }

}

html

<img src="{{picture}}" height="200px" width="200px">

I can see in the network tab that the image is loading:

What am i missing while displaying the image?


#2

Your service returns a Blob or so, your src requires an url. Just remove your service and use the URL directly :wink:


#3

Got the response as expected, Thank you.