Undefined when displaying Img's

[codeca423]

I have been playing with this code for a while and I was wondering why when I try to add img’s to the array on the js code makes the images appear on DOM but also makes a bunch of Undefined elements appear, How can I just make the 15 images appear without the undefined?
CODEPEN

[codeca423]

Using this method works fine, I wonder if this is an efficient way to do it. Thaks
js:

var arrayOfImages = [
  "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg",
  "11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg",
  "20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg",
  "30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg"
]

const images = []

for (var i = 0; i < 36; i++) {
  images.push({
    title: "Image " + (i + 1),
    source: arrayOfImages[i]
  });
}