为什么我在获取图像 url 后无法在 html 中插入图像

Question

我获取图像 URL，然后将此 URL 插入图像的 src，但它没有显示任何图像？我在这里遵循了这个想法（https://stackoverflow.com/a/12784213/8229192）

这是我的代码：

HTML：

<h1>Gif image search</h1>
<div id="problemform" class="form-inline">
    <input id="probleminput" class="form-inline" placeholder="Enter your keyword" type="text" style="display: inline;"></input>
    <button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
</div>

<div>Showing <h2 id="resultCount">0</h2>results<div>
<img src="" id="picture"/>

js代码：

$('#problemsubmit').on('click', function(event) {
    event.preventDefault();
    var formInput = $('#probleminput').val();

    var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + formInput + "&api_key=o1H3Da15oqhgM3WlAhPnQYJV8g9l3NdV&limit=6");
    xhr.done(function(data) {
            console.log("success got data", data);
            $('#resultCount').html(data.data.length);
            var imageString = data.data[0].url + "";
            $('#picture').attr('src', imageString);
        }
    );
});

Answer 1

您在 Giphy API 中使用的 url 参数链接到他们网站上包含该图像的页面。该参数并不意味着嵌入。

您需要深入研究数据以找到可以实际嵌入为图像的 GIF URL。您需要从数组中选择一个大小并使用images.[size].url，而不是使用url。

在 Giphy 的 API 文档中了解图像对象：
https://developers.giphy.com/docs/#images-object

这是一个使用 original 大小的 GIF 的实时示例：

$('#problemsubmit').on('click', function(event) {
  event.preventDefault();
  var formInput = $('#probleminput').val();

  var xhr = $.get("https://api.giphy.com/v1/gifs/search?q=" + formInput + "&api_key=o1H3Da15oqhgM3WlAhPnQYJV8g9l3NdV&limit=6");
  xhr.done(function(data) {
    $('#resultCount').html(data.data.length);
    var imageString = data.data[0].images.original.url;
    $('#picture').attr('src', imageString);
  });
});

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

<h1>Gif image search</h1>
<div id="problemform" class="form-inline">
  <input id="probleminput" class="form-inline" placeholder="Enter your keyword" type="text" style="display: inline;" value="hello"></input>
  <button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
</div>

<div>Showing
  <h2 id="resultCount">0</h2>results
  <div>
    <img src="" id="picture" />
  </div>
</div>