Question

我无法使用jquery在表格单元格中加载图像文件。我的视图有以下代码：

<table id="personDataTable" border="1">
        <tr style="font-size:large; height:auto">
            <th width="100">First Name</th>
            <th width="100">Last Name</th>
            <th width="100">Address</th>
            <th width="100">Age</th>
            <th width="500">Photo</th>
       </tr>
    </table>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnGetPersons').click(function () {
            var searchKey = $("#txtBoxPersonSearch").val();
            $.getJSON("/Person/GetJsonData", { search: searchKey }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    drawRow(data[i]);
                }
            });
        });
    });

    function drawRow(rowData) {
        debugger;
        var row = $("<tr/>")
        var img = "<img src=" + "~/Images/" + rowData.Photo + "/>";
        $("#personDataTable").append(row);
        row.append($("<td>" + rowData.FirstName + "</td>"));
        row.append($("<td>" + rowData.LastName + "</td>"));
        row.append($("<td>" + rowData.Address + "</td>"));
        row.append($("<td>" + rowData.Age + "</td>"));
        row.append($("<td>" + img + "</td>"));
    }

当我调试脚本时，我在img中获得的Image路径是正确的。此外，当我添加具有如下相同来源的单个img元素时，它会完美显示。

  <div> <img src="~/Images/C__Image1.jpg" /></div>

但是，它不会显示在表格单元格内。

请告诉我错误的地方。提前谢谢。

Answer 1

您已在表标记中的标记上应用宽度：

<th width="500">Photo</th>

由于这个原因，它没有显示完整的图像。图像坏了。从标签中删除宽度。

<th>Photo</th>

Answer 2

如果我稍微修改它以使用本地数据，那么你的代码似乎对我很好：

function drawRow(rowData) {
    var row = $("<tr/>")
    var img = "<img src='https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97100&w=100&h=100'/>";
    $("#personDataTable").append(row);
    row.append($("<td>" + rowData.FirstName + "</td>"));
    row.append($("<td>" + rowData.LastName + "</td>"));
    row.append($("<td>" + rowData.Address + "</td>"));
    row.append($("<td>" + rowData.Age + "</td>"));
    row.append($("<td>" + img + "</td>"));
}

drawRow({FirstName: "john", LastName: "Doe", Address: "123", Age: "69"});

JSFiddle of it working：https://jsfiddle.net/05qe1ggo/1/

我注意到的一件事是，生成图片网址的代码不会在代码中添加所需的引号。尝试更改

"<img src=" + "~/Images/" + rowData.Photo + "/>";

到

"<img src=\"" + "~/Images/" + rowData.Photo + "\" />";

Answer 3

您的代码正在使用我的本地图片。

据我所知问题在这里

var img = "<img src=" + "~/Images/" + rowData.Photo + "/>";

确保rowData.Photo在上述代码之后为您提供了正确的图像，警告变量img，并确定您是否正确获得了预期的图像路径。

Answer 4

您可以尝试在关闭图片代码的末尾添加空格吗？

var img = "<img src=" + "~/Images/" + rowData.Photo + " />";

我相信没有空间就会生成如下图像标记：

<img src="~/Images/abc.png/">

表格单元格中显示破碎图像，而图像显示在表格外部

4 个答案: