Display Database Image in Javascript

Question

I am using Ionic 2 calling a RESTful Service (JSON) in Java and a MySQL database. I am trying to display an image that is stored in the database, and render it in ionic.

Everything works perfectly, except I am struggling to get an image to display.

I have a PNG image stored in MySQL (type LONGBLOB). Then I access it, and in Java, convert it to Base64.

import org.apache.commons.codec.binary.Base64;
subCategory.setIcon(Base64.encodeBase64(subCategory.getIcon()));

JSON:

"icon" : "Vm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3Wk...lpRVVQwOQ=="

Then once received via JSON, I display it in html:

<img src="data:image/png;base64,{{item.icon}}" />

It just displays the image placeholder with no image.

I have also tried to decode the image with this Javascript:

icon = atob(icon);

and

 b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

with no success.

What's wrong with <img src="some url here" /> and setting up an HTTP server that serves image data from MySQL? Aside: Base64 and decodeURIComponent are entirely unrelated; one is not the inverse of the other. — Matt Ball
– Matt Ball, Commented Aug 1, 2016 at 14:53
Hi Matt, thanks for the advise. I can then remove decodeURIComponent. The reason I have it stored in the database is so that I can add images by just updating the database. Second, I want to keep it simple, the reason why I don't serve them as http, is because I have RESTful JSON services, and am making a call to get rest of the data anyway, I don't want to make another http call. — Richard
– Richard, Commented Aug 1, 2016 at 15:01
ps, removing the decodeURIComponent makes no differece, i.e. the image still does not display. — Richard
– Richard, Commented Aug 1, 2016 at 15:02
Welcome to Stack Overflow! Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example. — Athena
– Athena, Commented Aug 1, 2016 at 15:54
@Richard please don't just post a link to somewhere else. When that link rots your question will have lost all context. That's why we want folks to ask the question in full here. stackoverflow.com/help/mcve — Matt Ball
– Matt Ball, Commented Aug 1, 2016 at 17:32

Richard · Accepted Answer · 2016-08-01 18:08:29Z

1

This works:

<img src="data:image/png;base64,{{item.icon64}}" />

and

  b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

answered Aug 1, 2016 at 18:08

Richard

8,99534 gold badges128 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Over a year ago

Strange, it worked, now it doesn't with no code change. Confused! I have cleared browser cache.

Richard Over a year ago

My source code is displaying the following: <img ng-reflect-src="data:image/png;base64,Vm0wd2QyUX...M5" src="data:image/png;base64,Vm0wd2QyUX...M5"> Why is it displaying the src twice. using the following html code: <img src="data:image/png;base64,{{item.icon64}}" />

Collectives™ on Stack Overflow

Display Database Image in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related