Nativescript / Angular中NavigationButton上的远程图像答案

【问题标题】：Remote image on NavigationButton in Nativescript/AngularNativescript / Angular中NavigationButton上的远程图像
【发布时间】：2019-06-26 13:07:35
【问题描述】：

我想将用户头像放在我的应用标题的左侧。它在IOS中运行良好，但在android中不起作用。我试着这样做：

    <NavigationButton [icon]="customImage" color="#a81b38" (tap)="toggleSideDrawer()" *ngIf="isAndroid">
        <StackLayout verticalAlignment="center">
            <Label id="avatarImg" height="45" width="45" borderRadius="50" backgroundColor="#eeeeee"></Label>
        </StackLayout>
    </NavigationButton>

但我在编译过程中遇到错误。自定义图像是远程图像 (https://myimage)，但 android 正在查找本地文件资源。

所以我删除了图标并将图像放入其中，尝试这样做：

 <NavigationButton color="#a81b38" (tap)="toggleSideDrawer()" *ngIf="isAndroid">
    <StackLayout verticalAlignment="center">
        <Label [style.background-image]="customImage" style.background-position="center"
            style.background-size="cover" class="avatarImage" height="30" width="30" borderRadius="50"
            backgroundColor="#eeeeee"></Label>
    </StackLayout>
</NavigationButton>

我没有收到任何错误，但我在标题中看不到任何内容，全是白色的。我也尝试使用而不是，但同样的问题

【问题讨论】：

不支持远程图片，尝试下载图片并分配本地文件url。如果要使用background-image，则必须遵循CSS 语法url(imageurl)。背景图像也基于可用空间，当您的标签没有任何文本时，标签的大小将为零，请尝试设置固定的宽度和高度。

标签： android angular nativescript nativescript-angular

【解决方案1】：

您可以尝试删除适用于 android 的 <NavigationButton> 并将 <StackLayout> 直接放在您的 <ActionBar> 中，并将 horizontalAlignment 设置为“左”

<ActionBar>
  <StackLayout *ngIf="isAndroid" horizontalAlignment="left" verticalAlignment="center">
    <Label [style.background-image]="customImage" style.background-position="center"
            style.background-size="cover" class="avatarImage" height="30" width="30" borderRadius="50"
            backgroundColor="#eeeeee"></Label>
  </StackLayout>
</ActionBar>

【讨论】：