使用对象属性作为图像源

时间:2019-10-25 12:03:57

标签: javascript html json ajax

我试图将视频对象的图像属性作为源传递,以便在程序运行时可以在屏幕上显示图像。出于明显的原因,它找不到源,因为没有文件具有名称“ videoObj1.image”。我想知道是否有解决方法,也许是采用属性文本并将其作为源?甚至是直接使用videoObj1.image的方法。预先感谢。

Question2.html的一部分,我尝试使用image属性作为源:

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"
  }
  ]
  }
 }

1 个答案:

答案 0 :(得分:1)

问题是您正在将字符串react-native upgrade传递给img src属性,该属性显然不起作用。

相反,您应该使用经典的字符串串联方法来传递变量,如下所示:

"videoObj1.image"

OR

使用推荐的现代template literals方法,如下所示:

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