破碎的图像显示在表格单元格中，而图像完美地显示在表格之外答案

【问题标题】：Broken Image displaying in Table Cell whereas Image is shown perfectly outside the table破碎的图像显示在表格单元格中，而图像完美地显示在表格之外
【发布时间】：2015-07-13 02:53:26
【问题描述】：

我无法使用 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>

但是，它没有显示在表格单元格中。

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

【问题讨论】：

标签： jquery html image model-view-controller

【解决方案1】：

您已在表格标签内的第标签上应用宽度：

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

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

<th>Photo</th>

【讨论】：

我认为你在表格之外应用了宽度......也许在 id、body 或任何其他标签上

【解决方案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 的工作原理：https://jsfiddle.net/05qe1ggo/1/

我注意到的一件事是您生成图像 url 的代码没有在标记中添加所需的引号。尝试改变

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

到

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

【讨论】：

是的，静态图像有效。但它不适用于来自 rowdata 的图像路径。我也尝试按照您所说的更新图片网址，但这也不起作用。
哦，我刚刚意识到您在文件路径中使用了 tilda (~)。 Tildas 在 web url 中不是标准的，所以我会将其更改为相对 url，如下所示："<img src=\"" + "Images/" + rowData.Photo + "\" />";。这将在与 html 文件相同的文件夹中的“Images”文件夹中查找图像。
我也尝试使用更新后的字符串。但它仍然显示损坏的图像。

【解决方案3】：

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

据我说问题出在这里

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

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

【讨论】：

我仔细检查了 rowData.Photo 中的值。它只是带有扩展名的图像名称，如 testImage.png。 img 变量中有以下值。当我用普通的img标签尝试这个字符串时，图像显示得很好。

【解决方案4】：

您可以尝试在结束图像标记的末尾留一个空格吗？

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

我相信如果没有空格，它会生成像这样的图像标签：

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

【讨论】：

好的。只是为了确保它不是图像标签中的绝对/相对路径相关问题，您可以尝试提供确切的图像网址，即localhost/images + rowData.Photo