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

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!

score 6 · Accepted Answer · answered Oct 22 '18 at 06:48

6

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/

answered Oct 22 '18 at 06:48

Harshit_Raj

299
1
7

1

Thanks for your reply. I just guessed It is proper way to use base64 Images directly because It is too long. anyway, do you have any idea why this error message occur?? – Minsik Park Oct 22 '18 at 07:01
Refer to this link you will get more clarity https://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64 – Harshit_Raj Oct 22 '18 at 07:02

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

1 Answers1