javascript - 使用对象属性作为图像源

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;
        }

问题2.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>";

或者

使用推荐的现代template literals像这样的方法:

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