0

I have stored images in my database and need to serve these images to the user on his webbrowser.

My problem is that the following method, which serves these images, is causing my webbrowser to consume a lot of memory (600 MB). The reason I know this is the problem is because if I return null, the memory usage stays pretty much the same and is low.

I am only calling this method for accessing 5 images. All not larger than 5 mb.

I'm showing an image as followed by calling the following in my view (angularjs):

<img ng-src="http://localhost:8080/myapp/show/{{user.id}}"

Any tips/advice is greatly appreciated.

Moody
  • 851
  • 2
  • 9
  • 23

1 Answers1

1

The increased memory consumption in Web Browser client side can only be caused by excessive amounts of requests being sent to http://localhost:8080/myapp/show/{{user.id}} and being retrieved in the client end inside angular.

Applications using Angular tend be consuming memory in Browser but this is way to much. What you can do is to have ShallowETagHeaderFilter in your Spring MVC application so that if the image file is not changed it won't send the file down to the Angularjs application. This will return 304 "Not Modified" if the image is not changed so that browser can load it from cache.

Note:

ShallowETagHeaderFilter will still consume processing cycles but it will save bandwidth and browser memory.

shazin
  • 21,379
  • 3
  • 54
  • 71
  • Thanks for your comment. For some strange reason, I can not seem to implement ShallowETagHeaderFilter. I assume this can work as well right? http://stackoverflow.com/questions/17821518/unable-to-cache-images-served-by-spring-mvc – Moody May 11 '15 at 10:05
  • You don't need to implement it. Just put it in your web.xml or WebApplicationInitializer with /** url pattern. – shazin May 12 '15 at 01:00