CODEWITHSUNDEEP
javascript
Ayokunle
Ayokunle

Reputation: 5

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

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

Upvotes: 0

Views: 98

Answers (1)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

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

Upvotes: 1

Related Questions