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

Question

I am working on a table for a web application using MVC and knockout.js. I have experience doing web development but this is my first time using knockout. I currently have a table with 3 columns. The 2nd and 3rd are populated using a knockout function that displays the data. I tried to set up the first column the same way except using an image instead of text. I keep getting a broken image icon and an error in the brower's console.

The error the browser is giving me: GET http:// hostinfo /Sponsor/~PracticeAppImagesGWC.png 404 (Not Found)

This is my table:

<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>

This is my function for filling the table. (columns 2 and 3 fill properly)

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

I think something is escaping the slashes in the img source link, but I'm not sure and I can't figure out why.

UPDATE: my compiler is telling me this for the image tag: "Validation (HTML5): Element 'img' is missing required attribute 'src'."

Answer 1

Pass just image name from viewmodel, and static folder path can be append like this.

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

Hope this helps...

Answer 2

The push must be on the observableArray itself, you need to remove the parenthesis:

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