使用对象属性作为图像源答案

【问题标题】：Using object attribute as image source使用对象属性作为图像源
【发布时间】：2019-10-25 12:03:57
【问题描述】：

我正在尝试将视频对象的图像属性作为源传递，以便在程序运行时在屏幕上显示图像。由于显而易见的原因，它找不到源，因为没有文件名为“videoObj1.image”。我想知道是否有解决方法，也许可以获取属性的文本并将其作为源传递？甚至是直接使用 videoObj1.image 的方法。提前致谢。

我尝试使用 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"
  }
  ]
  }
 }

【问题讨论】：

标签： javascript html json ajax

【解决方案1】：

问题是您将字符串 "videoObj1.image" 传递给 img src 属性，这显然是行不通的。

您应该使用经典的字符串连接方法来传递变量，如下所示：

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

或

使用推荐的现代template literals 方法，如下所示：

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

【讨论】：