Question

我有一个viewModel，其中包含一个数据对象，其中包含3个值（名称，年龄，照片）。要访问数据属性，我可以执行data.name，data.age和data.photo。

我无法在img标签中显示照片，但我可以将其内容放入输入字段。有什么想法吗？

在我看来，我有

<div
    data-role="view" 
    data-layout="layout-customers"
    id="customer" 
    data-title="Customer"
    data-transition="slide:left"
    data-model="app.customer.viewModel"
    data-init="app.customer.init"
    data-show="app.customer.show">

    <form>
        <img data-bind="value: data.photo" src="data:image/png;base64"/>
        <input type="text" data-bind="value: data.photo"/>
        <input type="text" data-bind="value: data.name"/>
        <input type="text" data-bind="value: data.age"/>
    </form>

</div>

Answer 1

找到了实现这一目标的一种方法......

我将以下代码行添加到由view data-show ...

调用的函数中

//Get result here into result array
viewModel.set("data", result[0]);
var smallImage = $("#smallImage");
smallImage.attr("src", "data:image/jpeg;base64," + viewModel.data.photo);

查看

<img id="smallImage" src="" style="height:135px;"/>

有没有人有更好的方法？

Answer 2

您可以在虚拟机中添加计算字段，以创建图片所需的字符串。

让我们说你的VM看起来像这样：

var VM = kendo.observable({
    name: undefined,
    age: undefined,
    photo: undefined
});

所以你可以这样做：

var VM = kendo.observable({
    name: undefined,
    age: undefined,
    photo: undefined,
    photoAsBase64: function()
    {
        return "data:image/jpeg;base64," + this.get('photo');
    }
});

然后，您将图片来源与photoAsBase64

绑定到attr

<img data-bind="attr: { src: data.photoAsBase64 }" />

kendo移动数据绑定base64图像到图像标记

2 个答案: