Nativescript : Display an image using a Base64 string

Question

I'm Here today because I've a problem to decode Base64 string with nativescript angular.

So, in my situation, I've a listview of Image, like this :

<GridLayout class="page page-content">
        <ListView [items]="Dogs" class="List">
            <ng-template let-item="item">
               <StackLayout class="Container"> 
                <Image class="Logo" src="{{item.img}}"></Image>                 
               </StackLayout>
            </ng-template>
        </ListView> 
   </GridLayout>

There is nothings special, it just a list to show my images.

Then in my typescript, I've a array like this :

Dogs = [{img: fromBase64('FirstBase64String')},{img: fromBase64('SecondBase64String')},{img= fromBase64('ThirdBase64String')}];

But it does'nt display the image and i don't have any error message.
I've also try the classic javascript method, but she does'nt work.

So here my questions :

How can I display my images using my Base64String ?

Keep in mind that I've to use a Listview, I know Listview can be problematic.
But I've no choice but to use it.
Also, I'm on Android, I don't know if it matter.

Thank you.

You may need to use `_sanitizer.bypassSecurityTrustResourceUrl`, refer [this](https://stackoverflow.com/questions/38812993/base64-to-image-angular-2/43661231) — Tushar Walzade, Mar 04 '19 at 14:30
Where does `fromBase64` method come from in your code? Can you the complete sample code? — Manoj, Mar 04 '19 at 15:20

score 1 · Answer 1 · answered Mar 05 '19 at 01:16

I have created a sample playground for you. In my html I have a list view like this.

<ListView class="list-group" [items]="countries" (itemTap)="onItemTap($event)"
        style="height:1250px">
        <ng-template let-country="item">
            <FlexboxLayout flexDirection="row" class="list-group-item">
                <Image [src]="country.img" class="thumb img-circle"></Image>
                <Label [text]="country.name" class="list-group-item-heading"
                    verticalAlignment="center" style="width: 60%"></Label>
            </FlexboxLayout>
        </ng-template>
    </ListView>

and in my typescript, I am passing mix of encoded64string and image path and {NS} imagesource handles it automatically. Still if you want to play with fromBase64 & loadFromBase64 you can refere this SO post.

P.S. fromBase64 returns a Promise while loadFromBase64 returns a boolean.

Thanks, but I've the Bad Base 64 error, despite having a valid Base64 — Scieur Arnaud, Mar 05 '19 at 09:12

Nativescript : Display an image using a Base64 string

1 Answers1