如何嵌入来自 Flickr 的图像，以便图像出现在网站上？答案

【问题标题】：How to embed images from Flickr so image appears on website?如何嵌入来自 Flickr 的图像，以便图像出现在网站上？
【发布时间】：2014-05-11 07:00:27
【问题描述】：

我想知道如何将 FLICKR 中的图片嵌入到网站上，现在我只能获取图片的 URL，但我想用它来获取整个图片。这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-min.js" type="text/javascript"></script>

  <script type="text/javascript"> 

$(document).ready(function() {
    API_KEY = 'YOURAPIKEY'; //INSERT API KEY
    USER_ID = '28858578@N06'; //ENTER USER ID

    var photolist = [];

    $.getJSON('https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=' + API_KEY + '&user_id=' + USER_ID + '&format=json&jsoncallback=?', function(rest) {

        var numPhotos = rest.photos.pages;

        for (var u =1; u < numPhotos + 1; u++) {    
            $.getJSON('https://www.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=' + API_KEY + '&user_id=' + USER_ID + '&format=json&page=' + u + '&jsoncallback=?', function(results) { var targetDiv = $('#fotolist')
                for (var m =0; m < results.photos.total; m++) {
                  targetDiv.append("https://www.flickr.com/" + 
results.photos.photo[m].owner + "/" + results.photos.photo[m].id + "<br />");
                    photolist.push("https://www.flickr.com/" + results.photos.photo[m].owner + "/" + results.photos.photo[m].id);


                }      
            });
        }    
    }); 
});
  </script>


</head>
<body>
<div id="fotolist">
</div>
</body>
</html>

【问题讨论】：

您可以通过 jQuery 将该链接与 img 属性放在 DOM(html) 中。
为每个链接创建一个带有 src 属性的图像标签，然后通过 jQuery 将该标签添加到 DOM
@user2686338 如何获取每个链接并将它们作为新图像的来源？
有一个名为 Awesome Flickr Gallery 的 WordPress 插件可以做到这一点，这里是 ronakg.com/projects/awesome-flickr-gallery-wordpress-plugin

标签： javascript php jquery html flickr

【解决方案1】：

如果照片列表包含图像链接数组

var fotolist = $('#fotolist');
jQuery.each(photolist , function(index, value){
 fotolist.append('<img src="'+value+'">');
 });

【讨论】：