Hello. I need to render the contents of the json file in the html page. There were no problems with text fields. Used XMLHttpRequest. The picture can not be downloaded. Please tell me how to do it.

Json

[ { "name": "Product", "description": "Lorem ipsum dolor sit amet, "images":"img/img.jpg" } ]

js (brought all your js)

 (function () { var container = document.querySelector(".products-list"); getProduct(); function renderProduct(test) { test.forEach(function (product) { var element = getElementFromTemplate(product); container.appendChild(element); }); } function getProduct() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'data/test.json'); xhr.onload = function (evt) { var rawData = evt.target.response; var loadedProduct = JSON.parse(rawData); renderProduct(loadedProduct); }; xhr.send(); } function getElementFromTemplate(data) { var template = document.querySelector('#test'); if ('content' in template) { var element = template.content.children[0].cloneNode(true); } else { var element = template.children[0].cloneNode(true); } element.querySelector('.product-item__title').textContent = data.name; element.querySelector('.content').textContent = data.description; var titleImages = new Image(); // Здесь пытаюсь вывести картинку titleImages.src = data.images; element.querySelector('.img-cont').innerHTML = titleImages; return element; } })();

html

 <li class="product-item"> <span class="img-cont"> </span> <h2 class="product-item__title"></h2> <p class="content"></p> </li>

    1 answer 1

     document.querySelector('.img-cont').innerHTML = '<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/33430" alt="" />';

    https://jsfiddle.net/mp9459mg/