CODEWITHSUNDEEP
androidangularimagebase64nativescript
Scieur Arnaud
Scieur Arnaud

Reputation: 1017

Nativescript : Display an image using a Base64 string

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.

Upvotes: 0

Views: 2508

Answers (1)

Narendra
Narendra

Reputation: 4574

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.

Upvotes: 1

Related Questions