尝试从API JQuery设置图像源时出现问题

时间:2019-04-27 03:32:13

标签: jquery html json api

尝试从Youtube API设置图像SCR时遇到问题

jQuery

  $("#imgscr").attr("src", data.items[0].snippet.thumbnails.default.url);

html代码

    <img src="#" id="duckBhaiimg" alt="Alternate Text" />
  • 所以我要实现的是从JSON获取URL并将其设置为 #Imgscr。如果您在JSON中看到我们的对象中有“缩略图”对象,我们有“ URL”,我希望将其值设置在#Imgscr上。
  • 并且还想从本地化对象中获取数据

Json

 "items": [
      {
       "kind": "youtube#channel",
       "etag": "\"XpPGQXPnxQJhLgs6enD_n8JR4Qk/8ENLhz-4x-I1Wub-o7UpmXo-rcY\"",
       "id": "UC-lHJZR3Gqxm24_Vd_AJ5Yw",
       "snippet": {
        "title": "PewDiePie",
        "description": "I make videos.",
        "customUrl": "PewDiePie",
        "publishedAt": "2010-04-29T10:54:00.000Z",
        "thumbnails": {
         "default": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s88-mo-c-c0xffffffff-rj-k-no",
          "width": 88,
          "height": 88
         },
         "medium": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s240-mo-c-c0xffffffff-rj-k-no",
          "width": 240,
          "height": 240
         },
         "high": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s800-mo-c-c0xffffffff-rj-k-no",
          "width": 800,
          "height": 800
         }
        },
        "localized": {
         "title": "PewDiePie",
         "description": "I make videos."
        },
        "country": "US"
       }
      }
     ]
    }

1 个答案:

答案 0 :(得分:1)

您拥有ID为<img src="#" id="duckBhaiimg" alt="Alternate Text" />的这张图片duckBhaiimg,并且在您的jQuery中正在寻找ID imgscr

将代码更改为以下内容。

<img src="#" id="imgscr" alt="Alternate Text" />
$("#imgscr").attr("src", data.items[0].snippet.thumbnails.default.url);

const data = { items: [
      {
       "kind": "youtube#channel",
       "etag": "\"XpPGQXPnxQJhLgs6enD_n8JR4Qk/8ENLhz-4x-I1Wub-o7UpmXo-rcY\"",
       "id": "UC-lHJZR3Gqxm24_Vd_AJ5Yw",
       "snippet": {
        "title": "PewDiePie",
        "description": "I make videos.",
        "customUrl": "PewDiePie",
        "publishedAt": "2010-04-29T10:54:00.000Z",
        "thumbnails": {
         "default": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s88-mo-c-c0xffffffff-rj-k-no",
          "width": 88,
          "height": 88
         },
         "medium": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s240-mo-c-c0xffffffff-rj-k-no",
          "width": 240,
          "height": 240
         },
         "high": {
          "url": "https://yt3.ggpht.com/a-/AAuE7mAPBVgUYqlLw9SvJyKAVWmgkQ2-KrkgSv4_5A=s800-mo-c-c0xffffffff-rj-k-no",
          "width": 800,
          "height": 800
         }
        },
        "localized": {
         "title": "PewDiePie",
         "description": "I make videos."
        },
        "country": "US"
       }
      }
     ]
             }
$("#imgscr").attr("src", data.items[0].snippet.thumbnails.default.url);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="#" id="imgscr" alt="Alternate Text" />