我需要从我的数据库中检索图像。为此，我使用 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 中
请任何人帮我解决这个问题......谢谢......
最佳答案
了解更多信息后，下面是一个示例解决方案。当前的 servlet 一次只返回一张图像。我创建了一个示例来处理当前的 json，另一个示例来处理返回多个图像的 json。
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>');
});
}
关于javascript - 使用 Jquery 和 servlet 检索图像不显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14779683/