JSFiddle - React, Tailwind, and code Playground

by Mi Ku

HTML

<div class="items">
</div>
<div class="tpl">
  <img src="" />
</div>

CSS

.items {
  width: 100%;
  height: 100%;
}
.items img {
  margin-left: 10px;
}
.tpl {
  display:  none;
}

JavaScript

var items = {
    images: ["https://c1.staticflickr.com/3/2115/2145147279_3a41a9dbbb_b.jpg", "http://3.bp.blogspot.com/_blAoO6zwujg/TQ8l1fuBv3I/AAAAAAAABOk/LsG3n85SAWU/s1600/christmas_gifts.jpg",
'https://c2.staticflickr.com/4/3085/3157468301_a3b67bf93e_b.jpg'],    
    size: { 
        width: 100,
        height: 100
    },
    displayImage: function() {
        // code here
        $(items.images).each(function(idx){
        	var $img = $('.tpl img').clone();        
          $img.attr('width', items.size.width);
          $img.attr('height', items.size.height);
        	$img.attr('src', items.images[idx]);
        	$('.items').append($img);
        });
    }
};

items.displayImage();