CODEWITHSUNDEEP
javascriptjqueryknockout.js
SpringLearner
SpringLearner

Reputation: 13854

Showing image in webpage using knockout binding

this is my html code

<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>

and I am binding like 

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 = '[email protected]';
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();

and this is the fiddle

The problem is the actual image is not showing the image area instead a blank div area is showing as shown in the screenshot

enter image description here

Can anybody please tell me how to show the image?

Upvotes: 1

Views: 1848

Answers (2)

4imble
4imble

Reputation: 14426

You are setting the src without using a binding, so it wont work properly.

You do it like this:

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)

Upvotes: 1

Major Byte
Major Byte

Reputation: 4101

Do you mean that you want to add <img data-bind="attr: {'src': imgSrcValue}" /> inside thumbnail div, like:

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

Upvotes: 1

Related Questions