Images hosted on Airtable rendering fine on web view but not visible on mobile app

#1

I have been doing some testing with linking to Airtable API and decided to use directly images hosted on Airtable as attachments (since all of them have URL and seem to be accessible without any auth). This would be a handy shortcut. Here is an example of one such URL

“https://dl.airtable.com/.attachments/65f6e34084946dd3b60c837307d614b5/7912e288/grab_logo.png” which renders correctly below:

960×600 114 KB

This link seems to be working correctly on web-preview of my app, but on android preview the image seems to be loading but is not visible. Below you can see a screenshot with image frame showing up with dimensions matching the image (so something got loaded) but the image is not visible… Other non-airtable hosted images work fine
image

Any idea what might be causing such behavior?

#2

Try setting fixed width and height for the image component and any parent container. There could be something funky there.

#3

Thanks! I did set exact parameters of the image.

image

I could see that frame (border) has adjusted to the dimensions but there is still nothing inside. Image appears to be transparent ( but only on mobile, web version is fine…)

#4

Can you share the app ID for the app in question so we could take a look?

#5

The id is 200060

On the landing page there is a Image List and the images used there are coming from Airtable. The images show up on Web version but I don’t see it on the test app on my phone.

Anyway I am thinking that hosting images on Airtable might not be a good solution. Cloudinary seems like more stable choice.

Image request missing https
#6

I think using direct link to Airtable hosted images is causing an error in my Web app build…

image
image1254×558 19.4 KB

I am trying to remove right now any reference to airtable hosted images from my app.

#7

Yeah, looks like Airtable doesn’t like hotlinking their images from outside sources… Let us know if changing to a different hosting provider helps!

#8

Hi,

I have substituted all Airtable hosted images with Cloudinary. This works fine on mobile and web in preview, but I am still having issues with the build…

image
image1360×740 29.8 KB

#9

@Greg_F can you link to the failing builds? Does the issue persist on every build or is it intermittent?

#10

After 2 days of trial and error and 30+ builds, looks like I have figured out the reason. I believe the hot-linking was causing the issue. First it was Airtable image links, but I also had inside Airtable records with links to Instagram photos. The hotlinks to Instagram images were inside of Schema as examples… After I have switched all images to Cloudinary and rebuilt all schema again - the final build was successful.

1 Like
#11

Yup, sounds like a probable cause – when you’re creating a binary package, all assets at static URLs are downloaded and bundled into the app package. If Build Service is unable to fetch such as an asset, the build fails. This functionality should be configurable though, and definitely URLs inside schema examples should not trigger the logic to fetch them, as they are irrelevant from the app runtime point of view.