Блог

Главная - Вопросы по программированию - Как превратить ссылки/URL-адреса изображений в изображение с помощью JavaScript

Как превратить ссылки/URL-адреса изображений в изображение с помощью JavaScript

#javascript #html

Вопрос:

У меня есть набор ссылок на изображения, и я хочу превратить их в изображение с помощью JavaScript, и ссылки являются динамическими, которые поступают из API. Итак, как я могу превратить эти ссылки в изображение? Я хочу, чтобы все изображения отображались, например: у меня есть 7 URL-адресов изображений, поэтому я хочу, чтобы все 7 URL-адресов превратились в изображение, а не только 1

Ссылки находятся в div, как:

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

И данные поступают по API с использованием JS:

 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();

Как я могу это сделать

Комментарии:

1. Покажите пример того, какие у вас есть ссылки, и попытайтесь заставить это работать. Мы вам поможем.

Ответ №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>
Метки: