Я не вижу изображения из массива Javascript

Question

Я хочу загрузить некоторые изображения из массива Javascript, но изображения не могут быть загружены. Может ли кто-нибудь посмотреть мой код?

Спасибо

var works = [ 
 
    { 
 
    title: "First Project", 
 
    pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" 
 
    }, 
 
    { 
 
    title: "Second Project", 
 
    pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" 
 
    }, 
 
    { 
 
    title: "Third Project", 
 
    pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" 
 
    }, 
 
    { 
 
    title: "Fourth Project", 
 
    pic: "http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg" 
 
    } 
 
];

 //works 
 
    for(var i = 0; i < works.length; ++i) { 
 
     //script for array goes here 
 
     $('#work1').append('\ 
 
      <div class="col-xs-6 col-md-6 col-md-3">\ 
 
      <a href='#' class='work-img'>\ 
 
      <img class="img-responsive" src="' + works[i].pic + '">\ 
 
      <span class='info'><p class='proj-title'>Title:</p> src="' + works[i].title + '" </span>\ 
 
      </a>\ 
 
      </div>\ 
 
      ');//append closes

Answer 1

я исправил несколько вещей в вашем коде:

See this fiddle

JS код: // работает

for(var i = 0; i < works.length; ++i) { 
     //script for array goes here 

     $('#work1').append('<div class="col-xs-6 col-md-6 col-md-3">' + 
     '<a href="#" class="work-img">' + 
      '<img class="img-responsive" src="' + works[i].pic + '">' + 
      '<span class="info"><p class="proj-title">Title:</p>' + works[i].title + '</span>' + 
     '</a>' + 
     '</div>' 
     );//append closes 
    } 

Цикл for не был закрыт, и конкатенация элементов была неправильной. Кроме названия каждого изображения не было хорошо печатано.