WebAPI Knockout JS 图像绑定答案

【问题标题】：WebAPI Knockout JS Image BindingWebAPI Knockout JS 图像绑定
【发布时间】：2016-04-27 19:41:36
【问题描述】：

我正在使用 Knockoutjs 呈现用户个人资料页面。我正在为此调用一个 Web API 服务，该服务返回用户详细信息及其个人资料图片。

var MessageFrom = {
        FromUserProfileId: self.FromUserProfileId,
        FromUserName: self.FromUserName,
        FromUserPictURL: self.FromUserPictURL
    }




<div id="comments" class="comments" data-bind="with: viewModel">
                    <div class="comment clearfix" data-bind="foreach: Messages">
                        <div class="comment-avatar">
                            <img class="img-circle" data-bind="attr:{'src': FromUserPictURL}" alt="avatar">
                        </div>
                        <header>
                            <h3 data-bind="text: FromUserName"></h3>
                            <div class="comment-meta"><p data-bind="text: moment(DatePosted).format('LLL')"></p> </div>
                        </header>
                        <div class="comment-content">
                            <div class="comment-body clearfix">
                                <p data-bind="text: MessageBody"></p>
                            </div>
                        </div>
                    </div>
                </div>

从 WebAPI 返回的图片的 URL 是相对 URL，如 ~/Content/Member/Image1.jpg。虽然它与图像 URL 的绑定显示为“http://sitename.com/profile/~/Content/Member/Image1.jpg”。

一切都很好接受个人资料图片

我需要在绑定方面做一些事情，因为我无法更改来自数据库的路径。

感谢您的建议。

问候，

【问题讨论】：

显示生成 URL 的代码。在从 web api 返回之前，您可能需要解析该路径。您是否有权访问 Web Api 中的路径？

标签： asp.net-web-api knockout-3.0

【解决方案1】：

您的绑定看起来不错。对于初学者，我会使用您的 IE 或 Chrome 开发人员工具 ( F12 ) 并手动更改图像的 src 以找出最适合您的方法。

你说你收到这个：~/Content/Member/Image1.jpg

将 src 设置为此应该可以：/Content/Member/Image1.jpg

一旦你确定需要什么，你可以像这样改变你的消息对象客户端，但我认为这应该足够了：

var MessageFrom = {
        FromUserProfileId: self.FromUserProfileId,
        FromUserName: self.FromUserName,
        FromUserPictURL: self.FromUserPictURL.replace('~','')
    }

【讨论】：