How to display avatar?

Question

When the avatar is loaded from the backend and tries to display a picture view in angular. Angular is perceived as an image type text/html. Thus, there is a mistake:

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

I can not understand what the problem is.

html:

<div class="card-avatar" *ngIf="authService.currentUserData">
    <ng-container *ngFor="let photo of filteredPhotos">
       <a>
         <img  [src]="photo.photo" name="photo">                        
       </a>
    </ng-container>
</div>

ts:

  filteredPhotos =[];


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

score 0 · Answer 1 · answered Aug 10 '18 at 05:10

0

If you are using Angular CLI add photos folder to assets in angular.json (angular cli 6.0) or .angular-cli.json (angular cli < 6).

"assets": [
          "src/photos",
          "src/favicon.ico"
        ],

If you are using webpack, use copywebpack plugin (const CopyWebpackPlugin = require('copy-webpack-plugin'); )

 new CopyWebpackPlugin([
        { from: 'src/photos', to: 'photos' }]

answered Aug 10 '18 at 05:10

Rajani Kanth

1,395
10
8

He is fetching image from server not from local. – Vivek Doshi Aug 10 '18 at 06:15
I think the question was edited after my answer. I didn't see service related code that time. – Rajani Kanth Aug 12 '18 at 08:00

score -1 · Answer 2 · answered Aug 10 '18 at 04:04

-1

The issue is from your server side , not from angular

What its doing is , treating each url as html page ,

what you need to do is provide your assets folder as public and try to directly access it.

If server is in node and you are using express then , this is the line you need to write to provide public access to server/assets folder

app.use('/assets' , express.static('server/assets/'));

answered Aug 10 '18 at 04:04

Vivek Doshi

56,649
12
110
122

And you are not by any chance familiar with Ruby on Rails? I just use Rails as a server – user10202823 Aug 10 '18 at 04:08
@user10202823 , sorry not familiar with ROR , still I am pretty sure with error. So you need to search for how to provide image as image not html :) – Vivek Doshi Aug 10 '18 at 04:11
Check this : https://stackoverflow.com/questions/2875702/getting-the-image-url-without-the-html-in-rails , this might help you – Vivek Doshi Aug 10 '18 at 04:12

How to display avatar?

2 Answers2