WebAPI Knockout JS圖像綁定

我正在使用Knockoutjs呈現用戶配置文件頁面。爲此，我打電話給Web API服務，該服務返回用戶詳細信息及其個人資料圖片。WebAPI Knockout JS圖像綁定

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是〜/ Content/Member/Image1.jpg的相對URL。與Image URL的綁定顯示爲「http://sitename.com/profile/~/Content/Member/Image1.jpg」。

一切偉大工程接受頭像

我需要努力的東西上綁定，因爲我無法改變從數據庫裏的路徑。

感謝您的建議。

Regards，

來源

2016-04-26 user6167624

顯示生成Url的代碼。您可能需要先解析該路徑，然後再從網絡API中返回。你有權訪問Web Api中的路徑嗎？ – Nkosi

您的綁定看起來沒問題。對於初學者，我會使用您的IE或Chrome開發人員工具（F12）並手動更改圖像的src以查明您的工作原理。

你說你收到此：〜/內容/會員/ Image1.jpg

將src設置爲這應該工作：/Content/Member/Image1.jpg

你可以改變你的消息對象的客戶端一旦你確定需要什麼，但我認爲這應該就足夠了：

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

來源

2016-04-27 11:41:36 Yan

WebAPI Knockout JS圖像綁定

回答

相關問題