表格单元格从JQuery填充时不显示图像

Question

问题背景：

我正在开发一个简单的表'Cart'。我将一个填充的ViewBag对象（包含一个'CartItem'对象列表）从Controller传递到其关联的Cart View。

代码：

视图中的HTML表格布局：

<table id="Table1" cellspacing="3">
    <tr>
        <td></td>
        <td><b>Item</b></td>
        <td><b>Brand</b></td>
        <td><b>Unit Price</b></td>
        <td><b>Quantity</b></td>
    </tr>
</table>

从传递的ViewBag列表中填充表行的JQuery：

@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
    <script>

    var cartImage = '@cartItem.CartItemImage';
    var cartItemName = '@cartItem.CartItemName';
    var cartBrand = '@cartItem.CartItemBrand';
    var cartItemPrice = '@cartItem.CartItemPrice';
    var cartItemCartItemQty = '@cartItem.CartItemQty';

    AddRows(cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty)

    </script>
}

<script type="text/javascript">

var AddRows = function (productImage, productName, productBrand, productPrice, productQty) {

    var image = '<img src="~/Images/' + productImage + '" class="productCartImage"/>';

    var $html = $('<tr>' +
    '<td>' + image + '</td>' +
    '<td>' + productName + '</td>' +
    '<td>' + productBrand + '</td>' +
    '<td>' + productPrice + '</td>' +
    '<td>' + productQty + '</td>' +
    '</tr>');

    $('#Table1 > tbody:last').append($html);
};
</script>

问题：

目前上面的JQuery填充表格如下所示：

除非显示图像未显示，否则所有内容都会正确填充。

检查Chrome中的元素。 注意我确保图像存在于Images文件夹中如果我将img src置于图像显示的JQuery函数之外。我做错了什么？