I was able to confirm that the image can be displayed in HTML5 as shown below.
Is it possible to display byte data with img tag?
<img src="img/testicon.png"/>
US>java controller class
@RequestMapping(value="/", method=RequestMethod.GET)
public ModelAndView index (ModelAndView mav) {
mav.setViewName("index");
mav.addObject ("iconInfo", icon information);
return mav;
}
Icon information includes byte array (byte[]icon;) from the database.
This is the serializable class of information that holds the .
HTML5 side
${iconInfo.icon}
I don't know if I can specify it like this...
html5
I'm not familiar with java, so I can't give you a specific code, but I can embed the image by specifying the base64 encoded image data as data URI scheme as src.
<img src="data:image/jpg;base64,[base64 encoded image data]"/>
For example:
<!--Specify by URL -->
<img src="http://i.imgur.com/6CJiBQq.png"/>
<!--Embedded with Data URI-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACY0lEQVRYhe2Wv08UURDHP3fHDwsLEg0FJiZCYki0UgoIoTA2l1iIFSY2RAssLKDyH7C5lj/gjIkhgYLQ0NBQ+A8YWxuCQRILYyw8Drg7CuabN/v2hN0FAgWTTPbtm3kz3zc7Pxau6ZqKUwXoMa5cMpaLpwpQdu9l4BnwEpgBXgA3Ivm5RcU77rHnLeA30DHeB4ZN1vufs4VIDqvApNt/ZI4PzHkHmHDySTvjbeQmoa+akyYwB8wD2+a0bdwBtoB3ptO0M9XIVm7nz4GOTgkhPw0lm4DmC4CQsqrhFC3zbD4IGIva9teB1g + C4B7wC9CuPVskb51y+lI/h0YNFulvAE4gshrHKwB9SBV8Z12xNA3f6z2egjZ1lKeYJ0FproAnTKZj8A/Qng0WngEx98+W0YgAx98+WgAIAAMZJNpj4c3Tr/3E3/BDZZERKlEVCJrcIn8HPBq3jfQHYA+7nBaEc6AXW3c00lk+ahA2S80KNK/dI9iA2OB5KT+w2ygv6Kc5uwN8tL35os5FOjgA3Hb7/pdV4zmf6Wzmf6WZ0WZLZ0OZL0OZL0OZ0OZOZOZOZOZOZOZOThe following has not been confirmed yet, so please refer to it.
In Firefox's Javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", 'URI of image', true);
xhr.responseType="blob";
xhr.onload=function(){
if(xhr.status===200){
variable= document.getElementById('image tag ID');
if(element.src!=null)URL.revokeObjectURL(element.src);
element.src = URL.createObjectURL(xhr.response);
element = null;
}
xhr = null;
};
xhr.send();
}
I have downloaded and displayed the binary image.
© 2024 OneMinuteCode. All rights reserved.