如何显示和绑定base64字符串到Image作为Nativescript中的源? [英] How to show and bind base64 string to Image as a source in Nativescript?

问题描述

我正在尝试将base64图像显示并绑定为View中的ImageSource，但它根本没有显示.我在文档中找不到关于此的任何有用信息..我在做错什么吗?

I am trying to show and bind base64 image as ImageSource in my View, but it does not show up at all. I couldn't find any helpful information on this in documentation .. am I doing something wrong?

imageSource是应保存Image src数据的属性.

imageSource is property that should hold Image src data ..

这里是视图:

<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背后的代码:

here is the code behind 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:

and here is the 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:

Quickly skimming the code it doesn't look like you are setting the _imageSource for it to update. You call the method on the ImageSource instance but nothing to set the UI binding. I would try having a setter for the _imageSource or setting it with the Observable:

this.set('imageSource', this._imageSource.loadFromBase64(this._imageBase64String);

这篇关于如何显示和绑定base64字符串到Image作为Nativescript中的源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！