综合技术

Viewing the image in the website using the knock-out link

微信扫一扫,分享到朋友圈

Viewing the image in the website using the knock-out link
0

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 = '<a href="/cdn-cgi/l/email-protection" data-cfemail="1a7c68732b5a7c68732b34797577">[email protected]</a>';
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

Can anybody please tell me how to show the image?

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>

阅读原文...


微信扫一扫,分享到朋友圈

Viewing the image in the website using the knock-out link
0

Hello, buddy!

张朝阳质疑5G辐射大?手机辐射处于安全范围内

上一篇

渗透测试中文件上传技巧

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Viewing the image in the website using the knock-out link

长按储存图像,分享给朋友