Why I cannot insert a image in html after I fetch the image url

Question

I fetch the image URL, then I insert this URL into image' src, but it did not show any image? I followed the idea in here (https://stackoverflow.com/a/12784213/8229192)

Here is my code:

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 code:

$('#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);
        }
    );
});

Your jsfiddle does not contain anything related with your snippet. — lilezek
– lilezek, Commented Sep 24, 2017 at 20:00
You may be entry level developer as your name says but please paste your code here and then link so that we will understand — Kannan T
– Kannan T, Commented Sep 24, 2017 at 20:02

Jon Uleis · Accepted Answer · 2017-09-24 20:21:47Z

4

The url parameter you're using from the Giphy API links to a page on their site featuring the image. That parameter is not meant to be embedded.

You need to drill down into the data to find a GIF URL you can actually embed as an image. Instead of using url, you need to select a size from the array and use images.[size].url.

Read about the Images Object in Giphy's API docs:
https://developers.giphy.com/docs/#images-object

Here's a live example using the original size 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>

edited Sep 24, 2017 at 20:21

answered Sep 24, 2017 at 20:17

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

FullStackDeveloper Over a year ago

Thanks. How do you know that I need to do "data.data[0].images.original.url" instead of "data.data[0].url"?

Jon Uleis Over a year ago

@EntryLeveDeveloper It's all explained in the Giphy API, I suggest you read up to find out what sizes you want to use and some of the other features (like randomizing the image). I knew that data.url wasn't working when I visited the link in my browser and saw that it wasn't returning a GIF. Then I looked at the full data returned by the AJAX request and saw the array of image URLs.

FullStackDeveloper Over a year ago

This is data.data[0].url: giphy.com/gifs/studiosoriginals-l0IypqLJbGblf4vDy. This is data.data[0].images.original.url: media3.giphy.com/media/l0IypqLJbGblf4vDy/giphy.gif I can see both those two images if I open it in my browser. Please advise. Thanks.

Jon Uleis Over a year ago

I'll defer you to the API again. The former (url) is "The unique URL for this GIF" - meant to be shared online to let people click through to Giphy.com to see information about and share the image. The latter (images.[size].url) is "The publicly-accessible direct URL for this GIF." You need the direct URL to the image in order to use it in an HTML image object - not a link to Giphy's page about the image.

Collectives™ on Stack Overflow

Why I cannot insert a image in html after I fetch the image url

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related