Показ изображений в JS.

Можно использовать простое создание нового элемента. Будет создан все тот же IMG, но средства JS. Потом его только остается встроить в нужный элемент.

 const image = document.createElement('img');

image.src = 'ссылка на картинку.jpg';



element.appendChild(image); 

Альтернативой записи выше является создание объекта картинки... правда результат будет такой же, никакой разницы по сути... не считая возможности передачи в качестве аргументов функции первоначальные размеры (эквивалент атрибутов width и height).

 const image = new Image(width, height);

image.src = 'ссылка на картинку.jpg'; 

 

element.appendChild(image); 

Еще можно просто создать новый блочный элемент и прописать стили прямо в JS...

 const image = document.createElement('div'); 

image.style.position = 'позиционирование'; 

image.style.top = 'расположение от верхней грани'; 

image.style.left = 'расположение от левой грани';

image.style.width = 'ширина картинки в px';

image.style.height = 'высота картинки в px;

image.style.backgroundImage = 'ссылка на картинку.jpg'; 

 

element.appendChild(image); 

Но тут лучше просто делать привязку класса, а не заниматься подобным...

Создать элемент img программно, и так же вывести в него картинку по указанному пути

В JavaScript нет аналога тега <img src="image.png">, но вы можете вставить изображение на страницу, используя тег <img> и указав путь к файлу изображения в атрибуте src.

Например, чтобы вывести изображение с именем "image.png" на страницу, вы можете использовать следующий код:

<img src="image.png" alt="Изображение">

Если вы хотите вывести изображение из переменной, вы можете использовать следующий код:

let imageUrl = 'image.png';
document.body.innerHTML = `<img src="${imageUrl}" alt="Изображение">`;

В этом коде мы создаём строку с тегом <img> и вставляем значение переменной imageUrl в атрибут src с помощью синтаксиса шаблонных строк. Затем мы вставляем эту строку в тело документа с помощью свойства innerHTML.