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, Sep 24 '17 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, Sep 24 '17 at 20:02
Have you tried adding `console.log(data.data[0].url + "")` call? Also though I doubt this is the problem I'd use `.prop()` instead of `.attr()` — Pointy, Sep 24 '17 at 20:03
As i can see you are using jquery if that prop or attr() is not working try appending that via jquery check out this http://jsfiddle.net/chhameed/nWqcv/ — Kannan T, Sep 24 '17 at 20:08
@kannan If I hard code url for image src, it will work. Now, my problem is that I will update the image src — FullStackDeveloper, Sep 24 '17 at 20:10
@EntryLeveDeveloper well it's apparently also not working if you use `.attr()`. You can look at the browser "Network" debugging tool to see what's going on with the HTTP request (if that's being issued). — Pointy, Sep 24 '17 at 20:11
@Pointy I did not use .attr() now, I used .prop() as you suggested, but still not work. Can you please let me know how it can work by using a jsfiddle? — FullStackDeveloper, Sep 24 '17 at 20:15

Jon Uleis · Accepted Answer · 2017-09-24T20:21:47.963

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 '17 at 20:21

answered Sep 24 '17 at 20:17

Jon Uleis

17,693
2
33
42

Thanks. How do you know that I need to do "data.data[0].images.original.url" instead of "data.data[0].url"? – FullStackDeveloper Sep 24 '17 at 20:34
@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. – Jon Uleis Sep 24 '17 at 20:36
This is data.data[0].url: https://giphy.com/gifs/studiosoriginals-l0IypqLJbGblf4vDy. This is data.data[0].images.original.url: https://media3.giphy.com/media/l0IypqLJbGblf4vDy/giphy.gif I can see both those two images if I open it in my browser. Please advise. Thanks. – FullStackDeveloper Sep 24 '17 at 20:41
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. – Jon Uleis Sep 24 '17 at 20:45

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

1 Answers1