Question

我需要从我的数据库中检索图像。为此，我使用jquery和servlet来检索存储在表中的所有图像。但是当我运行代码时，它不会显示图像。图像采用JSON字节数组格式，我认为这是阻塞图像。

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);
              },
              });       
             });

服务器端代码位于此question

中

请有人帮我解决这个问题......谢谢......

Answer 1

在获得更多信息后，下面是一个示例解决方案。当前的servlet一次只返回一个图像。我创建了一个处理当前json的示例，另一个处理返回多个图像的json。

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

使用Jquery和servlet进行图像检索不会显示图像

1 个答案: