css - 无法让背景图片在 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 设置为隐藏，直到图像加载完毕。为了跟踪此事件，我正在收听 load img 上的事件标签。

<!-- 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()">

在 Controller 中:

imageLoaded() {
  this.loading = false;
}

因此，当浏览器提取准备好呈现图像时，事件处理程序设置 loading成为false ，更新 View ，以及 <div>不再隐藏，这导致它呈现。

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