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

我在使用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>

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

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

来源

2015-07-13 NIYATI ACHARYA

你表标签内上个标签应用于宽度：

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

由于这一点，没有显示完整的图像。图像被破坏。从标签中删除宽度。

<th>Photo</th>

来源

2015-07-13 02:58:00

我试图消除宽度，但不起作用。 –

我认为你已经在桌子外面应用了宽度...也许在ID，身体或任何其他标记 –

您的代码似乎好工作给我，如果我修改了一下，使用本地数据：

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 + "\" />";

来源

2015-07-13 03:01:59

是的，静态图像的作品。但它不适用于来自rowdata的图像路径。我也尝试更新图片网址，但是这也不起作用。 –

哦，我刚刚意识到你在文件路径中使用了一个tilda（〜）。 Tildas在网址上并不是标准的，所以我会将它改为一个相对的网址，像这样：'“”;'。这将在html文件所在的文件夹中的“Images”文件夹中查找图像。 –

我尝试更新的字符串以及。但它仍然显示破碎的形象。 –

你的代码工作与本地图像。

根据我的问题是在这里

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

确保rowData.Photo是给你正确的图像，警报变量img后，上面的代码，看看你是否正确获得预期的图像路径。

来源

2015-07-13 03:12:25 WisdmLabs

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

你可以尝试在关闭图像标签的末尾留出空间吗？

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

我相信没有它是产生像图像标签的空间：

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

来源

2015-07-13 05:41:06

这也行不通。 –

好的。只是为了确保它不是绝对/相对路径相关的问题在图像标签，你可以尝试给出确切的图像网址，即http：// localhost/images/+ rowData.Photo –

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

回答

相关问题