我已经使用 api 调用显示图像。所以检索单个图像没有问题
。但是我需要显示数据库中的整个表图像
,并将其名称保存在表中。
据我所知,由于我对 AngularJs 非常陌生。当作为列表对象返回时,我可以使用 ng-repeat
来实现此目的。
所以我从服务器端返回列表对象。其中图像被转换为base64
模式并发送列表。
但我也没有得到 AngularJs 存储库的任何回复。
Controller.java
@RequestMapping(value = "/imageDisplay", method = RequestMethod.GET)
public List<ImageUpload> showImage(HttpServletResponse response, HttpServletRequest request)
throws ServletException, IOException {
int id = 1;
List<ImageUpload> imageUploadList = loginService.getItemImageDetail(id);
ImageUpload imageUpload = imageUploadList.get(0);
System.out.println("Image::"+imageUpload.getImage()); //data:[B@f8b2f3
List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
// base 64 sequence::: 9j/4AAQSkZJRgABAQEASABIAA
ImageUpload imagepath = new ImageUpload();
imagepath.setImagePath(base64Encoded);
imageListForUi .add(imagepath);
}
return imageListForUi; // I have list of size 1
}
ImageUpload.js
scope.getImage=function(id){
alert("In image Display class");
Repository.getImage(id).then(
function(response){
alert("Response:"+response)
scope.image=response.data;
alert("Image data::"+scope.image);
})
};
Repository.js
this.getImage = function(){
var defer = $q.defer();
var imagePromise = http.get('/AB1.2/imageDisplay');
imagePromise.then(function(response){
imageList =response;
alert(imageList);
defer.resolve(imageList);
});
return defer.promise;
};
Demo1.html
//Initially if i call like this image was displaying.
<img data-ng-src="/AB1.2/imageDisplay" style="width: 200px;">
但是我需要以这种方式显示图像。因为我需要一次请求检索超过 10 张图像。
<img data-ng-src="data:image/jpeg;base64,{{image}}" alt="image">
但是在更改服务器端代码之后,即返回列表或 base64 响应时根本没有命中 angularJs 。
任何帮助将非常感谢。
最佳答案
我已经解决了这个问题,如果有人需要,请发布答案。
Controller.java
@RequestMapping(value ="/showImage", method = RequestMethod.GET)
@ResponseBody
public List<ImageUpload> getStateList(HttpServletResponse response, HttpServletRequest request) {
List<ImageUpload> imageUploadList = loginService.getStateList();
System.out.println(imageUploadList);
List<ImageUpload> imageListForUi= new ArrayList<ImageUpload>();
for (ImageUpload m : new ArrayList<ImageUpload>(imageUploadList)) {
String base64Encoded = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
ImageUpload imagepath = new ImageUpload();
imagepath.setImagePath(base64Encoded);
imageListForUi.add(imagepath);
}
return imageListForUi;
}
Image.js
getImageList();
function getImageList() {
AnalyserRepository.getImageList().then(
function(result) {
alert("Result::"+result)
scope.imageList = result;
console.log("Image "+ scope.imageList);
});
};
Repository.js
this.getImageList = function(){
var defer = $q.defer();
var imageListPromise = http.get('/projectName/showImage');
imageListPromise.then(function(result){
imageList = result.data;
defer.resolve(imageList);
});
return defer.promise;
};
演示.html
<ul>
<li ng-repeat="image in imageList">
<img data-ng-src="data:image/jpeg;base64, {{image.imagePath}}" alt="image" style="width: 200px;">
</li>
</ul>
关于javascript - 使用 Spring mvc 和 Angular JS 显示数据库中的图像列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44040984/