Forum Academy Marketplace Showcase Pricing Features

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

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:

When I initialise the api, this is the return:

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

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

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:

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

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

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

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

is my expression for the image element correct ?

Sorry, I made a mistake in my string
Should start with

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

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

right what language is it ?

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

wow thank you so much

1 Like