CODEWITHSUNDEEP
jqueryjsonurl
CM.
CM.

Reputation: 519

Displaying image from URL contained in JSON

I have run into a challenge with a project - I am trying to display a image from a URL specified in a JSON feed. Tried everything I could think of, yet no image. It appears that I can get the URL, but not display the image from it.

Here is the code -

<head>
    <script type="application/javascript" src="jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $.getJSON('http://openapi.etsy.com/v2/public/shops/textilesandtreasures?api_key=nshydhv462pr42t7g36b5nky',
        function(data) {
            $('#ShopBanner').html(data.results[0].image_url_760x100); 
        });
    })
    </script>
    </head>
    <body>
        Static Load
        <img src="http://ny-image0.etsy.com/iusb_760x100.7872244.jpg" width="100%"  />
        <br>
        Load from API
        <script language="javascript">
          document.write('<img src="'+ ShopBanner);
          document.write('" width="100%" />');
        </script>
        <ul>
        This is the correct URL being displayed</br>
         <li><a href="" id="ShopBanner"></a></li>
        </ul>
    </div>
    </body>
    </html>

Help with this problem would be greatly appreciated. Thanks!

Upvotes: 2

Views: 5202

Answers (2)

gnarf
gnarf

Reputation: 106322

You want to create an <img> tag and set its src attribute:

$.getJSON('http://openapi.etsy.com/v2/public/shops/textilesandtreasures?api_key=nshydhv462pr42t7g36b5nky',
function(data)
{
  var $img = $("<img />").attr('src', data.results[0].image_url_760x100);
  $('#ShopBanner').empty().append($img);

});

Upvotes: 0

Halil &#214;zg&#252;r
Halil &#214;zg&#252;r

Reputation: 15945

Add this into your <body>:

<div id="ShopBanner"></div>

Upvotes: 2

Related Questions