Question

我今天在这里，是因为我无法用原生脚本角度解码Base64字符串。

因此，根据我的情况，我具有Image的列表视图，如下所示：

<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>

没有什么特别的，只是显示我的图像的列表。

然后在我的打字稿中，我有一个像这样的数组：

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

但是它不显示图像，并且我没有任何错误消息。
我也尝试了经典的javascript方法，但是她不起作用。

所以这是我的问题：

如何使用Base64String显示图像？

请记住，我必须使用Listview，我知道 Listview 可能会出现问题。
但是我别无选择，只能使用它。
另外， 我在Android上 ，我不知道这是否重要。

谢谢。

Answer 1

我为您创建了一个示例playground。在我的html中，我有一个这样的列表视图。

background-color: blue

在我的打字稿中，我传递了encode64string和图像路径的混合，并且{NS} imagesource自动处理它。仍然，如果您想玩fromBase64和loadFromBase64，可以参考post。

P.S。 .parent div返回Promise，而<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>返回布尔值。

本机脚本：使用Base64字符串显示图像

1 个答案: