Использование атрибута объекта в качестве источника изображения

Question

Я пытаюсь передать атрибут изображения видеообъекта в качестве источника, чтобы я мог отобразить изображение на экране при запуске программы. По понятным причинам он не может найти источник, потому что ни один файл не имеет имени videoObj1.image. Мне было интересно, если есть обходной путь, может быть, взять текст атрибута и передать его в качестве источника? Или даже способ напрямую использовать videoObj1.image. Заранее спасибо.

Часть Question2.html, где я пытаюсь использовать атрибут изображения в качестве источника:

function displayVideo(videoObj){

            var html = "<h1>Search Result " + "</h1>" + "<b>";
            html += "Search keyword: " + videoObj.result.searchKeyword;
            html += "<table>";
            for(var i=0; i < videoObj.result.video.length; i++){
            var videoObj1 = videoObj.result.video[i];
            html += "<tr>";
            html += "<td>" + "<img src=videoObj1.image>" + "</td>";
            html += "<td align='right'>" + videoObj1.channel + "</td>";
            html += "<td style='color:green' align='right'>";
            html += videoObj1.view;
            html += "<img src='stockUp.png' />";
            html += "</td>";
            html += "<td align='right'>" + videoObj1.link + "%</td>";
            html += "</tr>";
            }
            html += "</table>";

            var displayDiv = document.getElementById("display");
            displayDiv.innerHTML = html;
        }

Question2.json:

{
"result": {
"searchKeyword": "Mathematics",
"video": [
  {
    "title": "Chaos Game",
    "channel": "Numberphile",
    "view": "428K",
    "link": "http://www.youtube.com/watch?v=kbKtFN71Lfs",
    "image": "http://i.ytimg.com/vi/kbKtFN71Lfs/0.jpg",
    "length": "8:38"
  },
  {
    "title": "Australian Story: Meet Eddie Woo, the maths teacher you wish you'd 
had in high school",
    "channel": "ABC News (Australia)",
    "view": "223K",
    "link": "http://www.youtube.com/watch?v=SjIHB8WzJek",
    "image": "http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg",
    "length": "28:08"
  },
  {
    "title": "Ham Sandwich Problem",
    "channel": "Numberphile",
    "view": "557K",
    "link": "http://www.youtube.com/watch?v=YCXmUi56rao",
    "image": "http://i.ytimg.com/vi/YCXmUi56rao/0.jpg",
    "length": "5:53"
  },
  {
    "title": "Magic Square Party Trick",
    "channel": "Numberphile",
    "view": "312K",
    "link": "http://www.youtube.com/watch?v=aQxCnmhqZko",
    "image": "http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg",
    "length": "3:57"
  },
  {
    "title": "The 8 Queen Problem",
    "channel": "Numberphile",
    "view": "909K",
    "link": "http://www.youtube.com/watch?v=jPcBU0Z2Hj8",
    "image": "http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg",
    "length": "7:03"
  }
  ]
  }
 }

Answer 1

Проблема в том, что вы передаете строку "videoObj1.image" в атрибут img src, что, очевидно, не сработает.

Скорее вы должны передать переменную либо с помощью классического метода конкатенации строк, подобного этому:

   "<td><img src=" + videoObj1.image + "></td>";

ИЛИ

Использование рекомендуемого и современного литерала шаблона Подход, подобный следующему:

   `<td><img src=${videoObj1.image}></td>`;