Search code examples
javascripthtmlflickr

How set photos to an img src from Flickr api in javascript

I am trying to create a table full of images I get from flickr. The array I pass in contains urls such as:

["https://www.flickr.com/photos/113081696@N07/24695273486", "https://www.flickr.com/photos/113081696@N07/24565358002", "https://www.flickr.com/photos/113081696@N07/24033705054", "https://www.flickr.com/photos/30607051@N00/23928266355", "https://www.flickr.com/photos/30735982@N00/23241595406", "https://www.flickr.com/photos/57453294@N00/21232117675", "https://www.flickr.com/photos/57453294@N00/21197130905"]

When I try to set the src on an img tag equal to one of these values:

var photo = document.createElement("img");
photo.src = arr[i];

I just get a bunch of broken picture icons. Can I not use flickr in this way?

Solution

  • the src of an img tag should be an url of an image, but

    https://www.flickr.com/photos/113081696@N07/24695273486 is a HTML document

    you can use the share button on that page to get piece of HTML code you can embed in your site, see it in action:

    https://jsfiddle.net/s4odszqL/

    UPDATE:

    if you're using flickr api, you can use getInfo to get farm, server, id, secret of a photo, then create photo url by following formats here