Нашей карточке не хватает изображения товара. Создадим его с помощью makeElement, передав функции имя тега 'img' и класс 'product__image'. Третий параметр мы не передаём, потому что у изображения нет текстового содержимого.

Чтобы картинка отобразилась на странице, нужно задать ей адрес файла с изображением, то есть значение атрибута src. Значением этого атрибута можно управлять с помощью одноимённого свойства DOM-элемента:

var picture = document.createElement('img');
picture.src = 'images/picture.jpg'

Таким же образом добавим изображению альтернативный текст, то есть описание фотографии. Если фотография не загрузится, на странице отобразится этот текст, чтобы пользователь понимал, что за блок находится перед ним. Кроме того, такой текст распознают программы, читающие вслух содержимое экрана (скринридеры), поэтому, добавляя такое описание, мы простым способом делаем элемент интерфейса доступным. Добавляем альтернативный текст через свойство alt. Как видите, названия атрибутов тегов и свойств DOM-элементов часто (но не всегда) совпадают.

picture.alt = 'Непотопляемая селфи-палка';

После создания изображения и «настройки» его свойств, добавим изображение в карточку. Обратите внимание, фотографию мы должны добавить перед ценой товара, потому что в разметке порядок тегов именно такой. Поэтому и код создания картинки нужно добавить перед кодом создания цены.