Image from api not displaying ? Getting a general warning need help!

Need help APIs
1

Im using the bubble api connector to send some parameters to an ai image generation api via a post request. I have been able to set the api up correctly and initialise.
Currently I have an image element on my page where I’m displaying the image dynamically where the it gets output image of the api call.
But whenever I run the app i keep getting this error:

image
image1698×140 14.6 KB

When I initialise the api, this is the return:
image
image1074×74 6.41 KB

So the expression i use is : (Get data from api)'s body output images :first item.
Why wont it display ? It works perfectly when i try in postman thought it would just display in bubble. Do I need to base64 decode it or change the type of the output image when initialise the api call?

Appreciate any help

2

You dont have the first part correct. Normally it will look like data:image/png,base64;base64imageencodedstring
No https before.

3

Oh thanks didnt know is this, what do I need to in order to make correct? this is raw output when initialise the api call:

image
image1162×124 10.3 KB

4

You first need to know the image format. Is it jpg? Png? And after you will be able to add the correct info the base url

5

nice ok, so they are .png, what do i need to do next ?

6

data:image/png,base64;imagesfieldfromapi(dynamic)
So manually add
data:image/png,base64; and complete with data from API. This should work

7

So the first part is looking correct but it still not displaying:

image
image2932×252 22.4 KB

is my expression for the image element correct ?
image
image944×226 13.9 KB

8

Sorry, I made a mistake in my string
Should start with
data:image/png;base64,

9

thanks man that was it!, what is this extra code you added? Didn’t even know that this was possible with bubble

10

This is how an url need to be formated for base64 file to be read by browser.

12

right what language is it ?

13

Not really a language but more a protocol/uri scheme like http and ftp.

14

wow thank you so much

1 Like