无法让背景图像在 stacklayout 上工作

Question

我有一个 JSON 文件以 base64 格式返回任意数量的图像。在我的 component.html 中，我试图将图像设置为 StackLayout 的背景，如下所示：

<StackLayout height="200" *ngFor="let image of selectedProperty.images">
   <StackLayout height="100%" ng-style="{'background-image':'url('+image.base64+')'}"></StackLayout>
   <!--<Image src="{{ image.base64 }}"></Image>-->
</StackLayout>

我知道image.base64 拥有正确的base64 字符串，因为如果我取消注释<Image> 元素，它会很好地显示图像。似乎问题出在background-image css 属性本身，因为即使我尝试使用来自谷歌的普通图像（例如style="background-image:url('https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg')" )，它也不起作用。我感到非常愚蠢，因为这只是必须是非常简单的事情，但我就是想不通。

非常感谢任何帮助。

Answer 1

我在我的一个项目中做过类似的事情。我将 div 设置为隐藏，直到图像加载完毕。为了跟踪这个事件，我在img 标签上监听load 事件。

<!-- the div is hidden until the image is loaded -->
<div *ngIf="photo.url" class="image" [hidden]="loading"
     [ngStyle]="{'background-image': 'url(' + photo.url + ')'}" >
</div>
<!-- hidden img tag to load the image and toggle loading status -->
<img src="{{photo.url}}" alt="{{photo.description}} photo" hidden (load)="imageLoaded()">

在控制器中：

imageLoaded() {
  this.loading = false;
}

因此，当浏览器获取准备好呈现图像时，事件处理程序将 loading 设置为 false，这会更新视图，并且 <div> 不再隐藏，从而导致它呈现。

我假设您可以调整代码以使用 NativeScript，但如果不能，请告诉我。