Javascript 使用data bind knockout.js显示图像

我正在使用MVC和knockout.js为web应用程序开发一个表。我有做web开发的经验，但这是我第一次使用knockout。我目前有一个有3列的表。第二个和第三个使用显示数据的敲除功能填充。我尝试以相同的方式设置第一列，除了使用图像而不是文本。我不断收到一个坏掉的图像图标和浏览器控制台中的一个错误

浏览器给我的错误是： 收到http://hostinfo/Sponsor/~PracticeAppImagesGWC.png 404未找到

这是我的桌子：

<table id="sponsorTable">
    <thead><tr>
        <th></th><th id="sponsor">Sponsor</th><th id="description">Description</th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: Sponsors">
        <tr>
            <td><img data-bind="attr: {src: Image}" /></td>
            <td class="sTableInfo" data-bind="text: Name"></td>
            <td class="sTableInfo" data-bind="text: Description"></td>
        </tr>
    </tbody>
</table>

我认为img源代码链接中的斜杠正在消失，但我不确定，也不知道为什么

---

更新：我的编译器告诉我，图像标记：验证HTML5:元素“img”缺少必需的属性“src”

只传递viewmodel中的图像名，静态文件夹路径可以这样附加

// in viewmodel
viewModel.Sponsors().push(new Sponsor("GWC.png", "name1", "info1"));
// inside table
<td><img data-bind="attr: {src:'/Image/'+ Image}" /></td>

希望这有帮助…

按钮必须位于按钮本身上，您需要删除括号：

var viewModel = new pageModel();
viewModel.Sponsors.push(new Sponsor("~/Images/GWC.png", "name1", "info1"));
viewModel.Sponsors.push(new Sponsor("second image would go here", "name2", "info2"));

---

tilda~在此上下文中不可用，它是唯一的服务器端。我在另一个页面示例中使用了tilda，它工作得很好。我认为您的服务器解释了这一点。试着在你的页面上做一个查看源代码，我想你会有完整的路径更新问题。。添加了一些我在底部发现的新信息。希望这有助于解决这个问题。我仍然困惑。仍然得到损坏的图像图标。要么图像不可用，要么路径错误。您可以尝试更改或添加路径。需要知道你们项目的目录安排。我有项目文件夹。然后在里面我有9个文件夹。其中一个是图像所在的Images文件夹。在我尝试添加图像之前，一切正常。图像是唯一不起作用的东西。尝试这个也没用。不过，控制台错误确实发生了变化。获取http://**主机信息**:54137/shandor/~/Images/GWC.png 404未找到它看起来只是尝试转到错误的文件夹。Idk为什么要查看/shandor/文件夹。@Jason9024是的，因为~，我必须说我告诉过你：所以我只需要给它完整的文件位置？我试着给它更多的路径信息，但似乎没有任何效果我现在很沮丧。我讨厌搞不清楚。@Jason9024如果您愿意，可以使用相对路径和../语法。哦，等等，我想你可以简单地做/Images/GWC.png这两个都是我的：

var viewModel = new pageModel();
viewModel.Sponsors.push(new Sponsor("~/Images/GWC.png", "name1", "info1"));
viewModel.Sponsors.push(new Sponsor("second image would go here", "name2", "info2"));