0
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

imjared
  • 19,492
  • 4
  • 49
  • 72
Ayokunle
  • 5
  • 3
  • 1
    Possible duplicate of [What is the best JavaScript code to create an img element](http://stackoverflow.com/questions/226847/what-is-the-best-javascript-code-to-create-an-img-element) – imjared Jan 01 '17 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 Jan 01 '17 at 17:30

1 Answers1

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);
Sandeep Nayak
  • 4,649
  • 1
  • 22
  • 33
  • 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 – Ayokunle Jan 02 '17 at 00:22