想要使用javascript在列表视图中显示图像图标

时间:2015-11-11 05:11:54

标签: javascript image url

我一直在尝试在表格中显示用户的个人资料图片列表视图。我可以将图片显示为url(从数据库中获取),但是想要显示真实的图像图标。以下是我现在所获得的截图。 image with URL 我想显示真实的图像而不是URL。 我正在使用javascript。 提前致谢。

2 个答案:

答案 0 :(得分:3)

我已经通过上面给出的答案解决了这个问题。

var data;

        $.ajax({
            type: "GET",
            url: "http://localhost:1337/users",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data); //This is your result 

                console.log(data[1].profile_url);
                for (var i = 0; i < data.length; i++) {
                    var node = document.createElement("LI");
                    var x = document.createElement("IMG");

                    x.setAttribute("src", data[1].profile_url);
                    x.setAttribute("width", "304");
                    x.setAttribute("width", "228");
                    x.setAttribute("alt", "The Pulpit Rock");
                    node.appendChild(x);
                    document.getElementById("myList").appendChild(node);

                }

            }
        });

答案 1 :(得分:2)

您可以查看此代码。它可以根据您的要求正常工作。您可以将数据库源用于Image url。这里我用一个数组作为例子。

<body>
<ul id="myList">
</ul>
<script type="text/javascript">
    var imgSrc = new Array ("/tetet/images.png","tetet/images.png");


    for (var i = 0; i < imgSrc.length; i++)
      {
          var node = document.createElement("LI");

          var x = document.createElement("IMG");
          x.setAttribute("src", imgSrc[i]);
          x.setAttribute("width", "304");
          x.setAttribute("width", "228");
          x.setAttribute("alt", "The Pulpit Rock");
          node.appendChild(x);
          document.getElementById("myList").appendChild(node);
      }  
    </script>