Image from Airtable

I have now successfully linked text from Airtable to Appgyver and I can get it to show text in a list item.
I can however not get any items from Airtable to show up in an image item list or in any lists for that matter. Any suggesting would be much appreciated.

Have you tested that the HTML links you get from Airtable work if you paste those into browser or use as static text in your app?

If so, I’d suggest to give the Image components some width and height (also the surrounding Container might need have width and height defined). In some cases the Image component loads before the data comes in which makes it render with 0px height being basically invisible.

I hope this helps, but let me know if the issue persists.

Hi Tomi,

Thank you for your reply.

The links work fine and I can also get the image to show up when I use static text in the app. I can see the source might be wrong. I cant link it to the database like I did with the text. Is this done in a different way?

Ive noticed that some images, for whatever reason, dont render in the Image component, but will render just fine when set as a background image of a container or cell.

@Dan if you cannot use direct binding I’d suggest to check that the property type is correct (Image URL). If that’s not the issue you could to access it via Formula and see if it helps. Or try John’s trick if it helps.

@JOHN_WORSHAM do you have an example where the Image component fails (I’d need the app ID)? I’d like to take a look at this, since I haven’t heard about this kind of issue. Only problem I know of is that Image components sometimes don’t work if those don’t have width and/or height set.

Thank you John and Tomi,

I got the image just fine when setting it as a background. I have now created an Image list item and text (Name and Latin) that render just fine, also on the following page via an id variable but I can’t get the images to work.

I can set a static image source, even with the source coming from Airtable and it works but not when trying to link it, like I have managed to do with the text.

Could you share your app ID so I could take a look at the issue?

I’d need to look at this since I don’t have any new guesses what could be wrong on top of image not having width and height set.

Hi Tomi,

Thank you very much for looking into this. My id is 156736.

Will you also look to see if I have set up the Query parameter, so I can make the search bar like in the turtorial.

Dan

I was able to make your pictures appear using Formulas. You have to use those because your schema includes Lists within Lists so the direct binding couldn’t know which picture in the List it should show. So it all comes down to which of the pictures you want to show here as you have many of those and in different places of the schema. One example that works here is:

current.fields.Picture[0].url

It takes the first picture in Picture List and uses its url property. You could also choose the picture from Scroll Pictures List:

current.fields["Scroll Pictures"][0].url

Or from deeper within nesting:

current.fields["Scroll Pictures"][0].thumbnails.small.url

It up to you which picture to use as all can be accessed via Formulas.


About the Query parameter: It looks as it should, but as I have no idea about your backend I cannot say if it works as such or not when you haven’t implemented it in the app logic. So, just try it out and create a new forum post if you’re not able to make it work or have some issues. I think following the tutorial is a good idea here.

1 Like

Thank you Tomi, that worked.
I didn’t put the [0].url in the formula but with that added, they are coming through just fine in the Appgyver App on the iPhone.
They are not showing up in the Android Appgyver App, it that something I am doing wrong again?

It seems that there is a bug in the Android app which makes the image component not appear in repeated lists. I’ll make a bug report of that and put it to our backlog.

You can fix this by replacing the image in your List item with a Container. To do that you have to:

  1. Enter the isolation mode and drag a Container into Cell #1
  2. Change the Container height and width to e.g. 50px
  3. Change the Container Background Image to current.fields.Picture[0].url or whatever url you want to use (binding to component input doesn’t apparently work in this case)
  4. Delete the Image component

This should be enough to make you component work also on Android

Thank you Tomi,

One final question when writing the formula. I have several pictures in the scroll column. I can assess them individually by changing the [0] to [1]. How do I get them all? This is not in the image item list anymore. This is just a normal row of pictures you can scroll through. I have already liked the repeated with, so it already knows there are more pictures.

Hi Tomi,

Just worked that you. Thank you for all your help.