使用敲除绑定在网页中显示图像

Question

这是我的HTML代码

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div data-bind="if: imgSrc">
        <div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"></div>
    </div>
    <div data-bind="ifnot: imgSrc">
    <div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img src="${pageContext.request.contextPath}/resources/ui_resources/img/profile_pic.png" /></div>
    </div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
    <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-bind=" file: imgFile, fileObjectURL: imgSrc"/></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

我和

一样具有约束力

var Patientp = function () {
    this.id = ko.observable(idValue);
    this.name = ko.observable(nameValue);
    this.address = ko.observable(addressValue);
    this.gender = ko.observable(genderValue);
    //this.consultant= ko.observableArray(consultantArrValue);
    this.username = ko.observable(usernameValue);
    this.password = ko.observable(passwordValue);
    this.email = ko.observable(emailValue);
    this.mobile = ko.observable(mobileValue);    
    this.imgFile = ko.observable(imgFileValue);
    this.imgSrc = ko.observable(imgSrcValue);
    this.imagePath=ko.observable(imagePathValue); 
    this.userid=ko.observable(useridValue); 
    //this.consultant= ko.observableArray(consultantArrValue);
    this.consultant= ko.observable(consultantValue);


}


idValue = '4';
useridValue = '6';
nameValue = 'fri1';
addressValue = 'fri1';
genderValue = 'Male';
mobileValue = '1234567890';
//these fields are not available
usernameValue = 'fri1';
passwordValue = '';
emailValue = 'fri1@fri1.com';
imgFileValue = 'fri1';
imgSrcValue='http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg'
//imgSrcValue = 'http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg';
imagePathValue = 'fri1';
//consultantArrValue = null;//'fri1';
consultantValue="d1";
//var doc={};
var projectUrl=$('#projectUrl').val();

这是fiddle

问题是实际图像没有显示图像区域而是显示空白div区域，如屏幕截图所示

有人可以告诉我如何展示图片吗？

Answer 1

您的意思是要在缩略图div中添加<img data-bind="attr: {'src': imgSrcValue}" />，例如：

<div data-bind="if: imgSrc">
    <div class="fileupload-new thumbnail" style="width: 150px; height: 150px;">
        <img data-bind="attr: {'src': imgSrcValue}" />
    </div>
</div>

Answer 2

您正在设置src而不使用绑定，因此它无法正常工作。

你这样做：

的js

var model = function () {
   this.imgPath = ko.observable("http://jsfiddle.net/img/logo.png");
}

ko.applyBindings(model);

HTML

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

（Fiddle）