Larsen Larsen - 8 months ago 81
AngularJS Question

Showing LongBlob photos from MySQL on View by using AngularJS

Purpose: show different images on my html page by using AngularJS and just one Servlet (images will change depending on request parameters["id" variable])

Code explanation:

  • I send request to the Servlet by passing id=13 as params (see JS

  • Servlet will retrieve the photo stored in the DB having id=13

  • The response value will be passed to the variable "image" on $scope

Problem: The image doesn't appear on my view.

Error Chrome console:
http://localhost:8080/MyProject/%7B%7Bimage%7D%7D 404 (Not Found)

Console.log(response) result:
Object {data: "����..., status:200, config:Object, statusText:"OK"}

Additional info:

  • If I change "id" assignment from
    "Integer.parseInt(request.getParameter("id"))" to "13", my image will be properly shown on the Servlet URL, which means the file is correctly retrieved and encoded.

  • If I add System.out.println(id) after "int
    id=Integer.parseInt(request.getParameter("id"))", it will be shown 13
    as value, which means params are correctly passed from JS file to Servlet

  • The photos I want to show on my view are stored on MySQL as longBlob


<img class="images" src="{{image}}"/>



$http.get('./ImagesServlet', {params: {id:13}})
.then(function(response) {
$scope.image =;


ImagesServlet CODE:
int id = Integer.parseInt(request.getParameter("id"));
PoiDao fetcher = new PoiDao();
try {
List<PoiImg> image = fetcher.ImgById(id);
Blob img = image.get(0).getPhoto();
InputStream in = img.getBinaryStream();
int length = (int) img.length();
int bufferSize = 1024;
byte[] buffer = new byte[bufferSize];
while ((length = != -1) {
response.getOutputStream().write(buffer, 0, length);

} catch (ClassNotFoundException | SQLException e1) {



If you don't want to change your $http call to expect a Blob directly,

let blob = new Blob([], {type: 'image/jpeg'});

Otherwise, pass responseType: 'blob' into it so will start as a Blob

Then convert this to a URL you can access from the HTML page

let url = URL.createObjectURL(blob); // note this will prevent GC of blob

Finally if you want to be clean, when you're done with this image

URL.revokeObjectURL(url); // frees blob to be GCd