How can i load a picture gotten from an API with Javascript

Question

var loadingImage = image.src(data.points_of_interest[i].main_image);
var bodystuff = document.createElement('img');
bodystuff.innerHTML = loadingImage,
bodystuff.innerHTML = loadingImage,
document.getElementById('outputs').appendChild(bodystuff);

That is my Javascript above and here is my HTML;

<section id="outputs">    
</section>

The image location from the API response is located here; data.points_of_interest[i].main_image

(do note it is in URL format = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Westminster_Abbey_West_Door.jpg/337px-Westminster_Abbey_West_Door.jpg")

(also it is in a loop hence the use of [i]);

any pointers, please?

My above code only prints out the URL in the console.

Thanks

Possible duplicate of What is the best JavaScript code to create an img element — imjared
– imjared, Commented Jan 1, 2017 at 17:30
a hint could be converting the image first to a base64 string and then use that in an img tag as a source — carloliwanag
– carloliwanag, Commented Jan 1, 2017 at 17:30

Sandeep Nayak · Accepted Answer · 2017-01-01 17:32:38Z

1

Try this:

var src = data.points_of_interest[i].main_image; // URL of the image
var bodystuff = document.createElement('img');
bodystuff.src=src;
document.getElementById('outputs').appendChild(bodystuff);

answered Jan 1, 2017 at 17:32

Sandeep Nayak

4,7571 gold badge25 silver badges34 bronze badges

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

1 Comment

Ayokunle Over a year ago

Worked fine; however I'm now stuck in a situation where I am trying to print out another information e.g data.point_of_interest[i].title, at the same time as printing the image above so that I can style them both; I have tried appending the variable given to the title to the image but nothing works? any pointers? @SandeepNayak

Collectives™ on Stack Overflow

How can i load a picture gotten from an API with Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related