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

Question

我正在为一个使用 MVC 和 knockout.js 的 Web 应用程序创建一个表。我有做网络开发的经验，但这是我第一次使用淘汰赛。我目前有一个包含 3 列的表。使用显示数据的剔除函数填充第二个和第三个。除了使用图像而不是文本之外，我尝试以相同的方式设置第一列。我不断收到损坏的图像图标和浏览器控制台中的错误。

浏览器给我的错误： GET 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>

这是我填表的函数。 （第 2 列和第 3 列填写正确）

function pageModel() {
    var self = this;
    self.Sponsors = ko.observableArray([]);
}

function Sponsor( _image, _name, _descrip)
{
    var self = this;

    self.Image = ko.observable(_image);
    self.Name = ko.observable(_name);
    self.Description = ko.observable(_descrip);
}

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"));

$(function () {

    ko.applyBindings(viewModel);
})

我认为有些东西正在逃避 img 源链接中的斜线，但我不确定，我不知道为什么。

更新：我的编译器告诉我这个图像标签：“验证（HTML5）：元素'img'缺少必需的属性'src'。”

Answer 1

push必须在observableArray本身，你需要去掉括号：

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"));

Answer 2

只从视图模型中传递图像名称，静态文件夹路径可以像这样附加。

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

希望这会有所帮助...