Dinamycally set an image based on API Data using image assets

Hi guys,

I am facing the following issue: I am fetching data from an API. I would like to set an image dynamically using preloaded assets based on the data returned from the API but I can’t find a way to do that.

Thanks in advance for your help!

can you share some more details as well as details for the api, because in appgyver you cant work with all types of api response, for example you cant use image buffers

Hi Dimos,

I have uploaded 5 images (file_a.png, file_b.png, etc.) and I get a letter from an API (a score ranging from a to e) and I would like to choose one of the 5 images by (ideally) creating the path to the file and adding it the letter of the score returned from the API to select the right image.

I can do that creating a “web_url” using a remote hosted image but it’s not the optimal solution in the long run and it would be better to use preloaded image assets.

Thanks

I believe this would work.

Create 5 app variables of type Image URL.
Assign your images to each of them
From your API point to the desired one of the 5 variables which in turn then are assigned to the images.

I haven´t tested this. The question for me is if the static assignment of the images to the app vars creates a link to the internal images when its compiled.

And just to understand what you have already done, can you fetch and open the images in the app?
and one more thing, when you say

you mean you want to store on the device or on your backend the image?

I have the following images loaded in the composer

image

I followed Phil’s advice and created the following formula to select the scores using some page variables.

IF(data.OpenFoodFactsV21.product.nutriscore_grade === "a", pageVars.nutriscore_a, IF(data.OpenFoodFactsV21.product.nutriscore_grade === "b", pageVars.nutriscore_b,IF(data.OpenFoodFactsV21.product.nutriscore_grade === "c", pageVars.nutriscore_c,IF(data.OpenFoodFactsV21.product.nutriscore_grade === "d", pageVars.nutriscore_d,pageVars.nutriscore_e))))

This works on the composer but it does not seem to work on the APP Preview on device. I will be testing if in the compiled app it will work or not and update the post.

I tested in the composer and there it works. In the preview and compiled app it does not work. Will have to investigate why…

in the debugger the 5 variables pointing to the 5 uploaded images point to “null” (and I assume the same value is in the compiled app too)

image

That’s a shame. I wonder how you are ever supposed to reference a saved image other than by static assignment?

You put always just 5 images and just toggle their visibility based on your variable. A bit clunky but it would work for sure.

I checked inside the APK: the image files are not even included in the assets! No wonder it cannot find them… they are not there!

ok, so include them linked statically on a page.

I have static images in my APK and they appear fine.