Question

我正在开发一个使用Play Framework技术的Web应用程序。在我的一个scala.html视图中，我使用它来显示图像：

<img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30">

它运作得很好。

现在我想在另一个网站上建立一个表格。该表现在如何显示它的数据，工作正常。所以现在在第一列中，我想在每一行中放置一个图像。这就是我认为它应该起作用的方式：

$(function () {
            $('#table').append("<thead><tr><th><a>CImage</a></th><th><a>C0</a></th><th><a>C1</a></th><th><a>C2</a></th><th><a>C3</a></th><tr></thead><tbody>");
            for(var i = 0; i < jsonObj.obj.length;i++){
                $('#table').append("<tr><td><img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>");
            }
            $('#table').append("</tbody>");

            $("#table").tablesorter();
          }

但如果我这样做，表格根本就不会显示出来。而且我不知道为什么。图像的来源是正确的。它肯定不能仅仅因为它在javascript函数中，因为只要我不尝试添加图像，其他HTML标记就能正常工作。我非常感谢任何帮助。

Answer 1

这是我的两分钱。在这一行：

$('#table').append("<tr><td><img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>");

尝试转义src，宽度和高度"，并使用'代替"作为@routes.Assets.at调用中的路径。因此，您对append()的调用应如下所示：

$('#table').append("<tr><td><img src=\"@routes.Assets.at('images/image/1003.png')\" width=\"30\" height=\"30\"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>");

注入代码后，HTML标记应如下所示：

<tr>
  <td>
    <img src="@routes.Assets.at('images/image/1003.png')" width="30" height="30">
  </td><td>
    {{jsonObj.obj[i]}}
  </td><td>
    {{jsonObj.somedata[i]}}
  </td><td>
    {{jsonObj.someData[i]}}
  </td><td>
    {{jsonObj.someData[i]}}
  </td>
<tr>

这应该像往常一样由您的浏览器呈现，除非在obj和somedata值内，否则会隐藏HTML标记或其他字符，例如<和>。这可能会搞砸了，所以如果可以的话，尽量检查并查看它们。

使用javascript将图像插入表格

1 个答案: