Javascript 使用Jquery和servlet检索图像时未显示图像

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

HTML:

天空公园图片库
E.旋转木马{
显示：块；
}
{{如果itemsCount>1}}
{{/if}

分装机装载ul li{
背景：url（img/ajaxloader.gif）无重复中心；
响应图像库带有缩略图转盘的jQuery图像库
以前的
下一个

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

$（窗口）.load（函数（）
{
$.ajax({
键入：“获取”，
url:“检索”，
数据类型：“json”，
成功：函数（数据、文本状态、jqXHR）
{
if（data.success）
{
警报（控制台日志（数据））；
var项目=[]；
$。每个（数据、功能（i、项）
{
items.push（“
”）；//关闭每个（）
$（'ul.es carousel'）。追加（items.join（“”））；
});
};
},
错误：函数（jqXHR、textStatus、errorshown）
{
警报（“错误”）；
log（“发生了非常糟糕的事情”+textStatus）；
},
});       
});

服务器端代码在下面的列表中

---

请任何人帮助我解决这个问题……谢谢……

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

html

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

/*只有一个图像*/
数据={
“成功”：没错，
“图像信息”：{
“姓名”：“A”，
“光盘”：“第一张图像”，
“imageid”：1，
“albumid”：1，
“拇指阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC？？AIAAD/gAIDAA…..CYII=”，
“完整阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABk…..ORK5CY？？II=”
}
};
if（data.success）{
$（'ul.es carousel'）。追加（'
'+data.imageInfo.name+'
'）；
}
/*多图像*/
数据={
“成功”：没错，
“图像信息”：
[
{
“姓名”：“A”，
“光盘”：“第一张图像”，
“imageid”：1，
“albumid”：1，
“拇指阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC？？AIAAD/gAIDAA…..CYII=”，
“完整阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABk…..ORK5CY？？II=”
}, 
{
“名称”：“B”，
“光盘”：“第二张图像”，
“imageid”：2，
“albumid”：2，
“拇指阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABkC？？AIAAD/gAIDAA…..CYII=”，
“完整阵列”：“iVBORw0KGgoAAAANSUhEUgAAAGQAAABk…..ORK5CY？？II=”
}
]
};
if（data.success）{
$.each（data.imageInfo，函数（i，项）{
$（'ul.es carousel'）。追加（'
'+item.name+'
'）；
});
}

返回的

数据是否正确？console.log（data）

显示了什么？它显示了

未定义的
您需要使用
项.thumbarray
作为
属性。您还需要引用您的属性。例如，使用
-注意
“
那么显然我们需要查看您的服务器端code@TomWalters你读过这个问题吗？在问题的底部有一个链接。我同意，我改为
，但是
console.log（数据）
显示未定义的
脚本也无效。'data id='+item.imageid/>应该是'data id='+item.imageid='/>'试试这个.items.push（'
'）；如果我手动运行服务器端代码，它会返回值
{success:“true”，imageInfo:{“name:“jj”，“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,0100,0,0,0100,8,2,0,0,0,0,0,0，-1，-12…
那么为什么
警报（console.log（data））；
显示
未定义的
好的信息。您想对数组进行编码。请参见
<ul class="es-carousel"></ul>

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