如何在javascript中将照片设置为来自Flickr api的img src



我正在尝试创建一个充满我从flickr获得的图像的表格。我传入的数组包含如下网址:

["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"]

当我尝试在等于以下值之一的 img 标签上设置 src 时:

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

我只是得到一堆破碎的图片图标。我可以不以这种方式使用 flickr 吗?

img 标签的src应该是图像的 url,但是

https://www.flickr.com/photos/113081696@N07/24695273486是一个 HTML 文档

您可以使用该页面上的"共享"按钮来获取可以嵌入到站点中的HTML代码片段,并查看其实际操作:

https://jsfiddle.net/s4odszqL/

更新:

如果您使用的是 Flickr API,则可以使用 getInfo 获取照片farm, server, id, secret,然后按照此处的格式创建照片 URL

知道了! 我必须使用flickr的静态站点

,如下所示:
"https://farm" + key.farm + ".staticflickr.com/" + key.server + "/" + key.id + "_" + key.secret + ".jpg";

最新更新