Image retrieving using Jquery and servlet is not displaying the images

Question

I need to retrieve images from my database. For this I used jquery and servlet to retrieve all images stored in a table. But when I run the code, it's not displaying the images. The images are in JSON byte array format, I think this was blocking images.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Skypark Image Gallery</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="description" content="Responsive Image Gallery with jQuery" />
    <meta name="keywords" content="jquery, carousel, image gallery, slider, responsive, flexible, fluid, resize, css3" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico"> 
    <script type='text/javascript' src='resources/js/jquery-1.8.3.js'></script>
    <script type="text/javascript" src="resources/js/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="resources/js/jquery.elastislide.js"></script>
    <script type="text/javascript" src="resources/js/gallery.js"></script>
   <link rel="stylesheet" type="text/css" href="resources/css/style.css" />
   <link rel="stylesheet" type="text/css" href="resources/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/elastislide.css" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
    <noscript>
        <style>
            .es-carousel ul{
                display:block;
            }
        </style>
    </noscript>
        <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">    
        <div class="rg-image-wrapper">
            {{if itemsCount > 1}}
                <div class="rg-image-nav">
                    <a href="#" class="rg-image-nav-prev">Previous Image</a>
                    <a href="#" class="rg-image-nav-next">Next Image</a>
                </div>
            {{/if}}
            <div class="rg-image"></div>
            <div class="rg-loading"></div>
            <div class="rg-caption-wrapper">
                <div class="rg-caption" style="display:none;">
                    <p></p>
                </div>
            </div>
        </div>
    </script>

    <style type="text/css">
    DIV#loader.loading ul li {
 background: url(img/ajax-loader.gif) no-repeat center center;
    </style>

</head>
<body>
    <div class="container">
        <div class="header">
        <div class="clr"></div>
        </div><!-- header -->

        <div class="content">
            <h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
            <div id="rg-gallery" class="rg-gallery">
                <div class="rg-thumbs">
                    <!-- Elastislide Carousel Thumbnail Viewer -->
                    <div class="es-carousel-wrapper">
                        <div class="es-nav">
                            <span class="es-nav-prev">Previous</span>
                            <span class="es-nav-next">Next</span>
                        </div>
                        <div class="es-carousel" id="loader">
                        <ul class="es-carousel">
                        </ul>
                        </div>
                    </div>
                    <!-- End Elastislide Carousel Thumbnail Viewer -->
                </div><!-- rg-thumbs -->
            </div><!-- rg-gallery -->

        </div><!-- content -->
    </div><!-- container -->
</body>

JavaScript:

$(window).load(function() 
            {
            $.ajax({
               type: "GET",
                url: "RetriveIm",
                dataType: "json",
                success: function( data, textStatus, jqXHR) 
                {
                    if(data.success)
                      {

                        alert(console.log(data));
                         var items = [];
                           $.each(data, function(i, item) 
                        {
                          items.push('<li><a href="#"><img src=data:image/png;base64,'+ item.thumbarray +' data-large=data:image/png;base64,' + item.imageInfo.fullarray + ' data-description=' + item.imageInfo.disc + ' alt=' + item.imageInfo.name + ' data-id='+ item.imageInfo.imageid +'/></a></li>');  // close each()
                          $('ul.es-carousel').append( items.join('') );
                        });
                      };
                  },
             error: function(jqXHR, textStatus, errorThrown)
              {
                 alert("error");
                   console.log("Something really bad happened " + textStatus);
              },
              });       
             });

The serverside codes are in this question

Please anyone help me to solve this...... thanks.....

Is the `data` being returned correctly? What does `console.log(data)` show? — Tom Walters, Feb 08 '13 at 19:20
You need to use `item.thumbarray` as the ``'s `src` attribute. You also need to quote your attributes. For example, use ` — Ian, Feb 08 '13 at 19:43
@TomWalters Did you read the question? There's a link for it at the bottom of the question — Ian, Feb 08 '13 at 19:45
@ Tom Walters This [question](http://stackoverflow.com/questions/14777159/retrieving-images-using-jquery-and-servlet-produces-http-status-500-error) contains server side program. I also provided this link in the bottom of the question — , Feb 08 '13 at 19:53

Osa E · Answer 1 · 2013-02-08T22:11:59.603

After some more information, below is a sample solution. Current servlet is returning just one image at a time. I have created an example to handle current json and another to handle json that returns multiple images.

http://jsfiddle.net/Mj4YL/

html

<ul class="es-carousel"></ul>

javascript

/* only one image*/
data = {
    "success": true,
    "imageInfo": {
        "name": "A",
        "disc": "1st image",
        "imageid": 1,
        "albumid": 1,
         "thumbarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC??AIAAAD/gAIDAA.....CYII=",
        "fullarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABk.....ORK5CY??II="
    }
};

if (data.success) {
    $('ul.es-carousel').append('<li>' + data.imageInfo.name + '<a href="#"><img src="data:image/png;base64,' + data.imageInfo.thumbarray + '" alt="' + data.imageInfo.disc + '"/></a></li>');
}

/*multiple images*/
data = {
    "success": true,
    "imageInfo": 
    [
    {
        "name": "A",
        "disc": "1st image",
        "imageid": 1,
        "albumid": 1,
        "thumbarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC??AIAAAD/gAIDAA.....CYII=",
        "fullarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABk.....ORK5CY??II="
    }, 
    {
    "name": "B",
        "disc": "2nd image",
        "imageid": 2,
        "albumid": 2,
        "thumbarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC??AIAAAD/gAIDAA.....CYII=",
        "fullarray": "iVBORw0KGgoAAAANSUhEUgAAAGQAAABk.....ORK5CY??II="
    }
    ]
};

if (data.success) {
    $.each(data.imageInfo, function (i, item) {
        $('ul.es-carousel').append('<li>' + item.name + '<a href="#"><img src="data:image/png;base64,' + item.thumbarray + '" alt="' + item.disc + '"/></a></li>');
    });
}

Your script is also invalid. ' data-id='+ item.imageid/> should be ' data-id='+ item.imageid = '/>' — Osa E, Feb 08 '13 at 19:43
If i run manually my server side code it returns the values `{"success":true,"imageInfo":{"name":"jjj","disc":" you tgfuy","imageid":23,"albumid":23,"thumbarray":[-119,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,100,0,0,0,100,8,2,0,0,0,-1,-12....` then why `alert(console.log(data));` showing `undefined` — , Feb 08 '13 at 20:03
Ok. Great information. You want to encode the array instead. See explanation at http://stackoverflow.com/a/3431108/2012977 — Osa E, Feb 08 '13 at 20:12
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24210/discussion-between-james-and-osa-e) — , Feb 08 '13 at 20:18

Image retrieving using Jquery and servlet is not displaying the images

1 Answers1