没有图像会从 API 加载，只会变得未定义答案

【问题标题】：No Image will load from API only getting undefined没有图像会从 API 加载，只会变得未定义
【发布时间】：2014-04-07 22:45:37
【问题描述】：

我遇到的主要问题是游戏的图像无法加载：它只是在运行搜索时一直说未定义。

我的第二个问题是我想把它改成搜索；目前它有一个设定值，我想让用户输入他们自己的标题。

我在下面链接了我的代码

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

        <script>
        $(document).ready(function(){
            $.ajax({
              url: "http://api.giantbomb.com/search/",
              type: "get",
              data: {api_key : "key here", query: "star trek", resources : "game", field_list : "name, resource_type, image", format : "jsonp", json_callback : "gamer" },
              dataType: "jsonp"
            });
        });

        function gamer(data) {
              var table = '<table>';
              $.each( data.results, function( key, value ) {
                  table += '<tr><td>' + value.image + '</td><td>' + value.name + '</td><td>' + value.resource_type + '</td></tr>';
              });
              table += '</table>';
              $('#myelement').html(table);
        }

        </script>

    </head>
    <body>
        <h1>Game Search</h1>
        <input id="game" type="text" /><button id="search">Search</button>
        <div id="myelement"></div>
    </body>
</html>

【问题讨论】：

标签： javascript html json image api

【解决方案1】：

改变了两件事：

field_list : "name, resource_type, image" 到 field_list : "name,resource_type,image" 将“图像”修复为空。
image 返回一个对象：使用icon_url,medium_url,screen_url,small_url,super_url,thumb_url 或tiny_url

查看此fiddle（更改 apiKey 以进行测试）

$(document).ready(function(){
        $.ajax({
              url: "http://api.giantbomb.com/search/",
              type: "get",
              data: {api_key : apiKey, query: "star trek", resources : "game", field_list : "name,resource_type,image", format : "jsonp", json_callback : "gamer" },
              dataType: "jsonp"
            });
        });

        function gamer(data) {
              var table = '<table>';
              $.each( data.results, function( key, value ) {
                  var image = "";
                  if (value.image) {
                      // either icon_url,medium_url,screen_url,small_url,super_ur,thumb_url or tiny_url
                      image = "<img src='"+value.image.tiny_url+"'/>";
                  }
                  table += '<tr><td>' + image + '</td><td>' + value.name + '</td><td>' + value.resource_type + '</td></tr>';
              });
              table += '</table>';
              $('#myelement').html(table);
        }
}

【讨论】：

【解决方案2】：

它似乎是未定义的，因为不仅仅是“图像”。

响应中的 json 部分：

"image": {
    "icon_url": "http://static.giantbomb.com/uploads/square_avatar/10/103881/1711377-stp1.jpg",
    "medium_url": "http://static.giantbomb.com/uploads/scale_medium/10/103881/1711377-stp1.jpg",
    "screen_url": "http://static.giantbomb.com/uploads/screen_medium/10/103881/1711377-stp1.jpg",
    "small_url": "http://static.giantbomb.com/uploads/scale_small/10/103881/1711377-stp1.jpg",
    "super_url": "http://static.giantbomb.com/uploads/scale_large/10/103881/1711377-stp1.jpg",
    "thumb_url": "http://static.giantbomb.com/uploads/scale_avatar/10/103881/1711377-stp1.jpg",
    "tiny_url": "http://static.giantbomb.com/uploads/square_mini/10/103881/1711377-stp1.jpg"
  }

你需要像 value.image.medium_url 一样调用它，并把它放在一个 img 标签中：

'<tr><td><img src="' + value.image.medium_url + '"/></td><td>'

【讨论】：

尝试添加 img 标签得到没有图像只是一个错误 net::ERR_FILE_NOT_FOUND 我已经链接了文档，因为这可能有助于giantbomb.com/api/documentation
尝试看看它是否打印了 url。 ' ' + value.image.medium_url + ' '
它没有显示任何它给出的错误 Uncaught TypeError: Cannot read property 'medium_url' of undefined GiantBomb(In%20developement%20Search).html:18
抓取图像是唯一的问题？ name 和 resource_type 打印正确吗？
是的，名称和资源打印它只是图像它可能只是一些简单的东西，但我无法弄清楚??????