如何使用 JavaScript 将图像链接/url 转换为图像

Question

我有一组图像链接，我想使用 JavaScript 将它们转换为图像，并且这些链接是来自 API 的动态链接。那么我怎样才能将这些链接变成图像呢？我希望显示所有图像，例如：我有 7 个图像 URL，因此我希望所有 7 个 URL 都变成图像，而不仅仅是 1 个

链接位于 div 中，如下所示：

<div class="avatar"></div>

数据来自使用 JS 的 API：

const getimage = () => {
    axios
        .get(
            "https://api.github.com/repos/owner/repo/contributors"
        )
        .then((response) => {
            const users = response.data;
            console.log(users)
            const avatar = document.querySelector(".avatar")
            avatar.innerHTML=users.map((u) => u.avatar_url).join("<br />");
        })
        .catch((error) => console.error(error));
};
getimage();

我怎样才能做到这一点

Answer 1

您需要为所有链接创建一个循环并创建图像标签，然后设置src属性，最后附加到正文。

试试这个：

var array = ["link1", "link2"];
array.forEach((t) => {
    var img = document.createElement("img");
    img.src = t;
    document.body.appendChild(img);
})

根据问题更新

     var users = ["link1", "link2"];
     const avatar = document.querySelector(".avatar")
     users.map((u) => {
         var img = document.createElement("img");
         img.src = u.avatar_url;
         avatar.appendChild(img);
         avatar.innerHTML += `<br/>`;
     })

  <div class="avatar">

    </div>