How to return an image from http source in Javascript

Question

I have a list of dictionaries containing data, where each dictionary has a key 'picture' and a value as an image source (http). 'picture': 'http://....'as well as other key:value sets.

I need to return a html page with a list of names and images associated with the dictionaries.

I have managed to return a list of names but when I try to return the images it returns the image source as a string.

function add_people(data) {
    var element = document.getElementById('people');

    var list = "<ul>";
        for (var i=0; i<data.length; i++) {
            list += "<li>"
                + data[i].name
                + data[i].picture
                + "</li>"
        }
    list += "</ul>";

    element.innerHTML = list
}

This function returns a list of names with the source for the images but not the images themselves, e.g.

Captain Pertsy://robohash.org/8c4b1b5a-bb8f-489b-8102-a1e9634627e0

Help is appreciated, thanks.

That's what <img> tags are for

charlietfl
– charlietfl

2019-04-08 05:14:10 +00:00
Commented Apr 8, 2019 at 5:14 — charlietfl
– charlietfl, Commented Apr 8, 2019 at 5:14

Jatin Parmar · Accepted Answer · 2019-04-08 05:20:46Z

2

you will need to add image tag inside list element to get the images

 function add_people(data) {
    var element = document.getElementById('people');

var list = "<ul>";
    for (var i=0; i<data.length; i++) {
        list += "<li>"
            + data[i].name
            + "<img src='"+data[i].picture+"' />"
            + "</li>"
    }
list += "</ul>";

element.innerHTML = list
 }

answered Apr 8, 2019 at 5:20

Jatin Parmar

2,9596 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

Thank you so much, I completely understand that now.

Abhijit Saxena · Accepted Answer · 2019-04-08 05:19:24Z

0

Use <img> tag to display your images from the source file. In <img> tag, set the source of the image in src attribute.

<img src="http://..." >

answered Apr 8, 2019 at 5:19

Abhijit Saxena

289 bronze badges

Comments

Ashikur Rahman · Accepted Answer · 2019-04-08 05:21:20Z

0

Use img tag

<img src=`${url}`>

answered Apr 8, 2019 at 5:21

Ashikur Rahman

781 silver badge7 bronze badges

Comments

Charlie · Accepted Answer · 2019-04-08 05:21:54Z

0

Use the <img> element if you want to show an image. Use the src attribute to point the element to the source. Here is the modified source.

function add_people(data) {
    var element = document.getElementById('people');

    var list = "<ul>";
        for (var i=0; i<data.length; i++) {
            list += "<li>"
                + data[i].name                  
                + "<img src=\"" + data[i].picture + "\"></img>"
                + "</li>"

        }
    list += "</ul>";

    element.innerHTML = list
}

Additionally, you can use ES6 template strings to easily concatenate strings to build DOM.

list += `<li> ${data[i].name} <img src="${data[i].picture}"></img></li>`

answered Apr 8, 2019 at 5:21

Charlie

24k12 gold badges65 silver badges96 bronze badges

Comments

Salmen Bejaoui · Accepted Answer · 2019-04-08 05:22:00Z

0

You have to use the img tag and add the picture data as a src attribute. You can also enhance the readability of the code using literal string.

function add_people(data) {
    var element = document.getElementById('people');

    var list = "<ul>";
        for (var i=0; i<data.length; i++) {
            list += `<li>
                      ${data[i].name}
                      <img src="${data[i].picture}" />
                    </li>`
        }
    list += "</ul>";

    element.innerHTML = list
}

answered Apr 8, 2019 at 5:22

Salmen Bejaoui

8651 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to return an image from http source in Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related