Manage images in social network

Ionic Framework ionic-v3
1

Hi everyone! I’m developing a social network (something like Instagram).

I have a doubt about how to display photos in posts:

Method 1, result.immagine is a base64 image:

<ion-card *ngFor="let result of results">
        <ion-card-header>
                ...
        </ion-card-header>
        <ion-card-content>
          <img src="data:image/JPEG;base64,{{result.immagine}}"/>
        </ion-card-content>
      </ion-card>

Method 2, result.immagine is a link (http://www.xxxxx.it/image.jpg):

<ion-card *ngFor="let result of results">
        <ion-card-header>
                ...
        </ion-card-header>
        <ion-card-content>
          <img src="{{result.immagine}}"/>
        </ion-card-content>
      </ion-card>

Which method is better, and why?
Why method 1 doesn’t show any image, returning error for unsafe image, and how can I resolve this issue?

Thank you.

2

I would use method 2, but do [src]=“result.imagine”. This is cleaner and easier to work with. If you have performance concerns - then you could figure out optimization paths.

As for method 1 - please provide more description of the error. But most likely you face DOM sanitization issue: https://angular.io/api/platform-browser/DomSanitizer

3

Why would you use method 2 instead of method 1?
Do I have to make public my static files with method 2? So, every user can access to any photo typing http://xxxxx/image.jpg in a browser, right?