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

在控制器中：

imageLoaded() {
  this.loading = false;
}

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

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

无法获取背景图像以在stacklayout上工作

1 个答案: