javascript - 使用挖空绑定(bind)在网页中显示图像

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

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

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