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

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

CodePudding user response：

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;

CodePudding user response：

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,compress&fit=crop&w=1999&h=594 1x, https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format,compress&fit=crop&w=1999&h=594 2x'
  },
  {
    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,compress&fit=crop&w=1999&h=594 1x, https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format,compress&fit=crop&w=1999&h=594 2x'
  },
  {
    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,compress&fit=crop&w=1999&h=594 1x, https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format,compress&fit=crop&w=1999&h=594 2x'
  },
  {
    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,compress&fit=crop&w=1999&h=594 1x, https://images.unsplash.com/photo-1656231869720-da7f20280b5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHx8&dpr=2&auto=format,compress&fit=crop&w=1999&h=594 2x'
  },
]

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>