How to use Base64 Encoded Image as img tag's source? - html

Question

now, I am make thumbnail pages using BASE64.
I store Image on server, and call them back as Base64 on client.
I want use these Base 64 encoded Imgs as src.
It it work well
. but, I got an err like that
GET http://localhost:8080/%7B%7Bitem.THUMBNAIL%7D%7D 404
what is problem? and it is proper way to use base64 as src without any convert?
here is my Source
Script
$http.get( "app/dashboard/recentWithInfo").then( function( rtn) {
rtn.data.map( item => {
if( item.THUMBNAIL){
item.THUMBNAIL = "data:image/png;base64," +item.THUMBNAIL.body;
}
})
$scope.items = rtn.data;
});
HTML
<img class="block-thumbnail-img" ng-if="item.THUMBNAIL != null" src="{{item.THUMBNAIL}}">
<h2 ng-if="item.THUMBNAIL == null" style="color:#ccc"> No THUMBNAIL</h2>
Additionally, I use Springboot and AngularJS.
Thanks in advance!

Answer 1

Yes you can use base64 images but make your the images are small and less in no.. below is a basic code where base64 images are called into html pages and rendered
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
check the fiddle http://jsfiddle.net/hpP45/