Jquery 断开的图像显示在表格单元格中，而图像完全显示在表格外部

使用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中得到的图像路径是正确的。另外，当我添加具有相同源的单个img元素（如下所示）时，它会完美地显示出来

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

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

请让我知道我错在哪里。提前谢谢

您已将宽度应用于表标记中的th标记：

因此，它没有显示完整的图像。图像被破坏了。删除标签的宽度

<th>Photo</th>

---

如果我稍微修改一下代码以使用本地数据，您的代码对我来说似乎运行良好：

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-it-working：

我注意到，生成图像url的代码没有在标记中添加所需的引号。试着改变

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

到

---

您的代码正在使用我的本地映像

我认为问题就在这里

var-img=

---

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

您能否尝试在关闭图像标记的末尾提供一个空格

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

我相信如果没有空间，它会生成图像标签，如：

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

---

是的，静态图像可以工作。但它不适用于来自rowdata的图像路径。我还试着像你说的那样更新图像url，但也不起作用。哦，我刚刚意识到你在文件路径中使用了tilda~。Tilda在web url中不是标准的，所以我将它改为相对url，如下：；。这将在与html文件位于同一文件夹的Images文件夹中查找图像。我也尝试使用更新的字符串。但它仍然显示出破碎的图像。我想你已经在桌子外面应用了宽度。。。可能是在id、body或任何其他tagI上双重检查了rowData.Photo中的值。它只是一个扩展名为testImage.png的图像名。img变量中有以下值。当我用普通的img标签尝试这个字符串时，图像显示良好。Ok。为了确保图像标记中没有绝对/相对路径相关的问题，您能否尝试给出准确的图像url，即+rowData.Photo

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

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