Нужно менять картинки через JS

const shopList = document.querySelector('.shop-list')
const img = document.createElement('pic')
img.src = "/SVG/Kartinka_BUBLIK.svg";
const container = document.querySelector('#pic')
 
container.append(img);
 
const SHOP = [
    {
      pic: container;
      name: "Кофейня КОМОД",
      time: "09:30-00:00",
      way: "1.3",
    },
    {
      name: "Малинка",
      time: "11:00-22:00",
      way: "2.3",
    },
    {
      name: "доставка пиццы ТАШИР ПИЦЦА",
      time: "07:30-22:00",
      way: "3",
    },
]
 
let html =""
console.log(shopList)
 
for (let i = 0; i<SHOP.length; i = i + 1){
  const current = SHOP[i]
  html = html + 
  `
  <div class="shop-element">
    <div class="name">${current.name}</div>
    <div class="time">${current.time}</div>
    <div class="way">${current.way} км</div>
  </div>`
}
 
shopList.innerHTML = html

const shopList = document.getElementById('shop-list');
const SHOP = [
    {
        name: 'Кофейня КОМОД',
        time: '09:30 - 00:00',
        way: 1.3,
        path: '/SVG/Kartinka_BUBLIK.svg'
    },
    {
        name: 'Малинка',
        time: '11:00 - 22:00',
        way: 2.3,
        path: '/SVG/Kartinka_RUBLIK.svg'
    },
    {
        name: 'доставка пиццы ТАШИР ПИЦЦА',
        time: '07:30 - 22:00',
        way: 3,
        path: '/SVG/Kartinka_KUBIK.svg'
    },
];
 
for (let {name, time, way, path} of SHOP) {
    shopList.insertAdjacentHTML( 
        'beforeEnd',
        `<div class="shop-element">
            <div class="pic"><img src="${path}" /></div>
            <div class="name">${name}</div>
            <div class="time">${time}</div>
            <div class="way">${way} км</div>
        </div>`
    );
}