Want to show image icon in the list view using javascript

Question

I have been trying to show a list view of users with their profile picture in a table. I can show the picture as a url (fetched from database), but would like to show the real image icon instead. Below is the screenshot of what I am getting right now. I would like to show the real image instead of the URL. I am using javascript for this. Thanks in advance.

For getting those values in the table, I am using Bootstrap table.

Picture Name Phone Number Login ID — shumana chowdhury, Nov 11 '15 at 05:22
How to use img src there? Thanks for your answer. :) @Rayon Dabre. — shumana chowdhury, Nov 11 '15 at 05:24
Actually, those are created dynamically. This uses a script and here is an example. var listItem = $('.results tbody').children('tr'); — shumana chowdhury, Nov 11 '15 at 05:35
Create `img` tag dynamically too and set its `src` attribute... — Rayon, Nov 11 '15 at 05:44

score 3 · Answer 1 · answered Nov 11 '15 at 10:21

I have solved it by the help of the answer given above.

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);

                }

            }
        });

Please up vote or correct the answer if you think this is helpful for you. — shumana chowdhury, Nov 24 '15 at 13:00

score 2 · Accepted Answer · edited Nov 11 '15 at 06:44

2

You may check this code. It works fine according to your requirements. You can use database source for Image url. here I am using an array for an example.

<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>

edited Nov 11 '15 at 06:44

shumana chowdhury

1,742
2
14
34

answered Nov 11 '15 at 05:36

Muhammad Sadiq

434
4
10

1

ok. But one more concern. This image src are from a particular URL. I need to parse only the image url from a set of JSON data. Then need to put it in array. Couldn't figure out how to do that. If you can help, that would be a lot for me. Thanks for your effort. – shumana chowdhury Nov 11 '15 at 06:17
check this json into javascript array http://stackoverflow.com/questions/20881213/converting-json-object-into-javascript-array – Muhammad Sadiq Nov 11 '15 at 06:19
then you can easily use an array in your script. – Muhammad Sadiq Nov 11 '15 at 06:22

Want to show image icon in the list view using javascript

2 Answers2