자바 스크립트를 사용하여 중첩 배열에서 이미지 호출 및 표시

안녕 얘들 아, 내 JSON 배열에서 중첩 된 내 이미지를 호출하고 표시하는 데 문제가 있습니다 .Google을 시도했지만 항상 angularjs를 사용하여 결과가 표시되므로 여기에 내 코드가 있습니다.

JSON 배열

var places = [{
      "country_name": "Denmark",
      "latitude": 56,
      "longitude": 10,
      "status": "OK",
      "site_name": "Denmark",
      "company_logo": "nothinglogo.png",
      "serial_number": "12345",
      "products": [{
        "image": "someimage.png"
      }]
    },
    {
      "country_name": "Zaire",
      "latitude": -20,
      "longitude": 30,
      "status": "OK",
      "site_name": "Zaire",
      "company_logo": "nothinglogo.png",
      "serial_number": "67890",
      "products": [{
        "image": "someimage.png"
      }]
    },
    {
      "country_name": "Vietnam",
      "latitude": 16,
      "longitude": 106,
      "status": "NO",
      "site_name": "Vietnam",
      "company_logo": "nothinglogo.png",
      "serial_number": "1111",
      "products": [{
        "image": "someimage.png"
      }]
    },
    {
      "country_name": "Taiwan",
      "latitude": 23.5,
      "longitude": 121,
      "status": "OK",
      "site_name": "Taiwan",
      "company_logo": "nothinglogo.png",
      "serial_number": "22222",
      "products": [{
        "image": "someimage.png"
      }]
    }

자바 스크립트

function displayData(e) {
  var html = '';
  var html2 = '';
  var mapDiv = document.getElementById('mapContainer'),
    i = 0,
    dataIndex, tooltipDiv, key, item,
    mapMarkers = $(mapDiv).find('.e-mapMarker'),
    index = 0;
  var collection = [];
  collection = collection.concat(flsSites, flsInstallation, flsProduct);

  var sites = $('#fls_site').attr('data-flag');
  var installation = $('#fls_installation').attr('data-flag');
  var product = $('#fls_products').attr('data-flag');

  for (i = 0; i < mapMarkers.length; i++) {

    if (e.target.parentNode.parentNode == mapMarkers[i]) {
      index = i;
    }
  }

  html += '<div id="infocontainer" class="map_element">';
  html += "<div class='p-image'><img src='src/images/" + collection[index].company_logo + "' /></div>";
  html += '<div class="popupdetail">';
  html += '<div class="p-name"> Site Name: ' + collection[index].site_name + '</div>';
  html += '<div class="p-name"> Site Status: ' + collection[index].status + '</div>';
  html += '<div class="p-name"> Country: ' + collection[index].country_name + '</div>';
  html += '</div>';
  html += '</div>';

  html2 += '<div class="rightcontainer">';

  html2 += '<div id="imagedetail">';
  html2 += "<div class='p-name'><img src='src/images/" + collection[index].products.image + "' /></div>";
  html2 += '</div>';
  html2 += '</div>';
  if (!document.getElementById('map_tooltip')) {
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
      "display": "none",
      "padding": "5px",
      "position": "absolute",
      "z-index": "13000",
      "cursor": "default",
      "font-family": "Segoe UI",
      "color": "#707070",
      "font-size": "12px",
      "pointer-events": "none",
      "background-color": "#FFFFFF",
      "border": "1px solid #707070"
    });
  } else {
    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
      "left": (e.pageX + 5),
      "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");

    $('#search-result').append(html2);
  }
}

그래서 나는 내 중첩 이미지를 html2로 표시하고 싶습니다. 그래서 어떻게 할 수 있습니까? 면책 조항 : Im 영어를 잘하지 못해서 설명이 명확하지 않을 수 있습니다 감사합니다

최신 정보

이것은 Chrome 콘솔의 결과입니다.

GET //path/to/src/images/undefined 404 (Not Found)