使用 Unsplash API 显示随机图像

大约三年前，我买了一个域名，一如既往地打算用它来启动一个项目。三年过去了，我却什么都没做。¯_(ツ)_/¯

为了练习一些 JavaScript，我决定同时探索 Unsplash 的 API 来创建一个交互式占位符。

分解

const numItemsToGenerate = 1;

这只是为我们设置了从服务中请求的项目数量。

function renderItem(){
  fetch(`https://source.unsplash.com/1600x900/?beach`).then((response) => {   
    let item = document.createElement('div');
    item.classList.add('item');
    item.innerHTML = `<img class="beach-image" src="${response.url}" alt="beach image"/>`     
    document.body.appendChild(item);
  }) 
}

这实际上是将照片拉进来并传递给它div创建的 ( item)。在 URL 中，https://source.unsplash.com/1600x900/?beach您可以删除 slug 或输入其他搜索词。使用他们的文档可以进一步自定义，包括特定用户的图片、特定尺寸的图片或许多其他参数。

因为我只是想将图像设置为完整背景，所以我将其附加img到innerHTML，而不是针对页面上的特定 div 或部分。

如果您想要针对特定​​的 ID 或类别，您可以在脚本中添加如下内容：

    let item = document.getElementByID('existing');
    item.existing = `<img class="beach-image" src="${response.url}" alt="beach image"/>`   

然后传递并渲染图像：

for(let i=0;i<numItemsToGenerate;i++){
  renderItem();
}

回想起来

起初，我不太确定是否应该只使用 JS 来显示图片，而不使用任何 HTML 代码，所以我首先尝试在 HTML body 中构建一个。我尝试使用类名并设置 ID，但似乎无法成功，于是我参考了一个教程，div尝试了另一种策略。

一旦我让 API 运行并显示，图像尺寸就会变得很疯狂 - 原来我在源 URL 中包含了图像尺寸，所以我把它拉出来并创建了一个 CSS 类，img因为只会显示一个。

我做这个只是为了练习一下 JavaScript，生成一些让我赏心悦目的随机图片。这也是我第一次为了校对/编辑/写作以外的目的去探索 API 或阅读文档。

现在重新审视它，我看到了另一种方法，我可以将图像设置为，body-background而不是创建div并使用 CSS 类来调整照片大小，这有点令人兴奋 - 我正在学习〜！