Display Image

Ionic Framework ionic-v3
1

Hi All,

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" : "YVZaQ1QxSjNNRXRIWjI5QlFVRkJUbE5WYUVWVlowRkJRVmhWUVVGQlJt...

Then once recieved via JSON, I decode it in Javascript:

subCategoryModel.icon64 = decodeURIComponent(subCategoryModel.icon);

Then in html I try display the image:

<img src="{{subCategoryModel.icon64}}" />

I get the following error in the console:

"NetworkError: 404 Not Found - http://localhost:8100/YVZaQ1QxSjNNRXRIWjI5QlFVRkJUbE5WYUVWVlowRkJRVmh...

Does anyone know how I need to handle png images?

Thanks

1 Like
2

Have you tried adding data:image/png;base64, at the beginning ? => data:image/png;base64,YVZaQ1...

1 Like
3

Hi Yimiprod,

Thanks for the reply.

I tried the following as you suggest:

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

Now I get no errors, but the image does not display (just an empty image placeholder).

2 Likes
4

This works:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />

But that’s just hard-coded. It suggests that my Base64 encoding/decoding of the png is incorrect. Does anyone have any suggestions please?

1 Like
5

Can you check if the / aren’t escaped when the app render the img? It’s probably decodeURIComponent who is in fault here, i don’t think you need to use it.

6

I have tried without the decodeURIComponent, and still get the same result.

I also try hard-code my image (copied from the JSON) and it still does not display (no errors though);

<img src="data:image/png;base64,VmpGYVlWbFdiRmRTV0doV1YwZG9WVmxYY3pGVU1WWnpZVVpP...

1 Like
9

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}}" />

10

The ng-reflect stuff is for debugging.

Maybe you could try to replicate this in a plunkr?

11

I have tried what you suggest but I cannot display. Any suggestions ?

12

Obrigado cara!
Resolveu meu problema!