How to display images in elements created with javascript using an array?

Question

I'm new to JavaScript, so apologies if any of my terminology is wrong or confusing - I'm still trying to learn! I'm trying to create a page that adds the image from an array to a div that's created on page load. At best I can get it to show the path of the image, but I can't get it to show the actual image. This is the code I've got so far (in this, nothing at all is showing in the element, not even the path)

HTML:

<main>
   <div id="style-container">
   </div>
</main>

JavaScript:

const styles = [
    {
      description: 'Alunar Gold Leather Sling Back Heels',
      code: 'ALUNAR GDL',
      img: 'static/images/ALUNAR-GDL.jpg'
    },
    {
      description: 'Alunar Green Leather Sling Back Heels',
      code: 'ALUNAR GNL',
      img: 'static/images/ALUNAR-GNL.jpg'
    },
    {
      description: 'Alunar Silver Leather Sling Back Heels',
      code: 'ALUNAR SLL',
      img: 'static/images/ALUNAR-SLL.jpg'
    },
    {
      description: 'Alunar White Leather Sling Back Heels',
      code: 'ALUNAR WTL',
      img: 'static/images/ALUNAR-WTL.jpg'
    },
]

const createStyle = () => {
    let i;
    for (i = 0; i < styles.length; i++) {
        const styleDiv = document.createElement('div');
        styleDiv.setAttribute('class', 'style');
        const getStyleContainer = document.getElementById('style-container');
        getStyleContainer.appendChild(styleDiv);
        styleDiv.style.width = ('100px');
        styleDiv.style.height = ('200px');
        styleDiv.style.margin = ('20px');
        styleDiv.style.display = ('flex');
        styleDiv.style.justifyContent = ('center');
        styleDiv.style.alignItems = ('center');
        const styleImage = document.createElement('img');
        styleDiv.appendChild(styleImage);
        styleImage.innerHTML = styles[i].img;
        styleImage.style.width = ('100px');
        styleImage.style.height = ('200px');
        styleImage.style.objectFit = ('contain');
    }
}

window.onload = () => {
    createStyle();
}

Any help would be hugely appreciated

Thanks

Answer 1

InnerHtml property sets or returns the HTML content (inner HTML) of an element. For image use src to set the path

styleImage.innerHTML = styles[i].img; to styleImage.src= styles[i].img;

Answer 2

• you were missing to set src attribute of img tag.
• I have used forEach loop to loop through styles array of object, As it's just more readable formated
• Below function createElemt() return element with classname and tag given in function parameter.

function createElem(tagName, className) {
  const element = document.createElement(tagName);
  element.setAttribute('class', className);
  return element;
}

• I have defined all the css from javascript to css as it's easy.

 const styles = [{ description: 'Alunar Gold Leather Sling Back Heels', code: 'ALUNAR GDL', img: 'https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=1&auto=format%2Ccompress&fit=crop&w=1999&h=594%201x,%20https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format%2Ccompress&fit=crop&w=1999&h=594%202x' }, { description: 'Alunar Green Leather Sling Back Heels', code: 'ALUNAR GNL', img: 'https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=1&auto=format%2Ccompress&fit=crop&w=1999&h=594%201x,%20https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format%2Ccompress&fit=crop&w=1999&h=594%202x' }, { description: 'Alunar Silver Leather Sling Back Heels', code: 'ALUNAR SLL', img: 'https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=1&auto=format%2Ccompress&fit=crop&w=1999&h=594%201x,%20https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format%2Ccompress&fit=crop&w=1999&h=594%202x' }, { description: 'Alunar White Leather Sling Back Heels', code: 'ALUNAR WTL', img: 'https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=1&auto=format%2Ccompress&fit=crop&w=1999&h=594%201x,%20https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format%2Ccompress&fit=crop&w=1999&h=594%202x' }, ] const createStyle = () => { styles.forEach(style => { const styleDiv = createElem("div", "style"); // calling createElem function const getStyleContainer = document.getElementById('style-container'); getStyleContainer.appendChild(styleDiv); const styleImage = createElem("img", "myImg-style"); // calling createElem function styleImage.src = style.img; // you were missing this it says that set src attribute to style.img(I have used unsplash images) for your code it's your path styleDiv.appendChild(styleImage); const myTitle = createElem("h1", "my-title"); myTitle.innerHTML = style.code; styleDiv.appendChild(myTitle); const myDescription = createElem("p", "my-description"); myDescription.innerHTML = style.description; styleDiv.appendChild(myDescription); }) } // for creating an elemnt function createElem(tagName, className) { const element = document.createElement(tagName); element.setAttribute('class', className); return element; } window.onload = () => { createStyle(); }

 // to reduce styling by javascript .style { width: 100px; height: 200px; margin: 20px; display: flex; justify-content: center; align-items: center; } .myImg-style { width: 100px; height: 200px; object-fit: contain; }

 <main> <div id="style-container"> </div> </main>