Dodanie właściwości url do tagu <img>

Question

Cześć,

Szukam sposobu na dodanie właściwości url do tagu <img>, utworzonego przy pomocy metody .insertAdjacentHTML.

Poniżej podsyłam kod:
 

const images = [
  {
    url: 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    alt: 'White and Black Long Fur Cat',
  },
  {
    url: 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    alt: 'Orange and White Koi Fish Near Yellow Koi Fish',
  },
  {
    url: 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    alt: 'Group of Horses Running',
  },
];

images.forEach(function (value) {

const gallery = document.createElement('li');

gallery.insertAdjacentHTML('afterbegin', '<img>');

console.log(gallery);
  
});

 

Answer 1

Użyj template literal z interpolacją:

gallery.insertAdjacentHTML(
  'afterbegin',
  `<img src="${value.url}" alt="${value.alt}">`
);

, albo skorzystaj z insertAdjacentElement i wstaw już udekorowany obrazek:

const img = document.createElement('img');
img.src = value.url;
img.alt = value.alt;

gallery.insertAdjacentElement('afterbegin', img);

 

Comments

dziękuję, sprawdzę oba sposoby

#1 działa, dziękuję za pomoc :)