我试图在我的视图中显示和绑定base64图像作为ImageSource,但是它根本不显示。我在文档中找不到关于此的任何有用信息..我在做错什么吗?
imageSource是应保存Image src数据的属性。
这是视图:
<Page loaded = "loaded" xmlns = "http://schemas.nativescript.org/tns.xsd" >
<StackLayout>
<TextField hint = "String for encoding!" text = "{{ message }}" />
<Button tap = "{{ onGenerateQrTap }}" text = "Generate QR" class = "button" />
<Image src = "{{ imageSource }} " />
</StackLayout>
</Page>
这是View背后的代码:
import { Page } from 'ui/page';
import { EventData } from 'data/observable';
import { QrGeneratorViewModel } from '../../ViewModels/QrGeneratorViewModel';
import { Button } from 'ui/button';
import { Image } from 'ui/image';
let viewModel = new QrGeneratorViewModel();
export function loaded(args: EventData) {
let page = <Page>args.object;
page.bindingContext = viewModel;
}
这是ViewModel:
import { Observable } from 'data/observable';
import { QrGenerator } from '../Common/QrGenerator';
import { ImageSource } from "image-source";
export class QrGeneratorViewModel extends Observable {
private _message: string;
private _qrGenerator: QrGenerator.Generator;
private _imageBase64String: string;
private _imageSource: ImageSource;
constructor() {
super();
this._qrGenerator = new QrGenerator.Generator();
this._imageSource = new ImageSource();
}
get message() {
return this._message;
}
set message(newMessage: string) {
this._message = newMessage;
}
get imageSource(): ImageSource {
return this._imageSource;
}
public onGenerateQrTap(): void {
this._imageBase64String = this._qrGenerator.qr(this._message);
this._imageSource.loadFromBase64(this._imageBase64String);
}
}
最佳答案
快速浏览一下看起来不像是在设置_imageSource
使其更新的代码。您可以在ImageSource
实例上调用该方法,但无需设置UI绑定。我会尝试为_imageSource
设置setter或使用Observable设置它:this.set('imageSource', this._imageSource.loadFromBase64(this._imageBase64String);