How to fetch images from table in Airtable

[Clarke_T]

Hello! I’m fairly new to using Airtable but right now I am creating an application where I pull data from a table I created and populate React components with that data. It’s a pretty simple integration and has been pretty straight forward for the most part but the only thing I am struggling with at the moment is pulling an image I stored in a table.

I know Airtable has the “Attachment” datatype which is what I’ve been using but it’s been causing me runtime errors every time I try to pull the image for each record.

Is there a better way to store and fetch images using Airtable? Is it better to use a third party alternative?

[Rose_K · Accepted solution]

Hello and welcome to the Community @Clarke_T!

Quick question: are you using the Airtable API to pull data to your React application or are you doing something else while creating a custom app?

If you are using the Airtable API directly you can access a record’s attachment field’s URL when fetching the rest of that record:

Here is an example of pulling and pushing data (including pushing an attachment field) if that’d be helpful as well!

Let me know if I can help provide any more information, and if this helped answer your question please mark it as the solution :white_check_mark: .

[Clarke_T]

Hi Rose, thanks for responding, I’m using the Airtable API to pull images from my table. I’m pulling the url for the image I keep getting an error that reads:

{“error”:{“type”:“INVALID_PERMISSIONS”,“message”:“Invalid permissions”}}

So I am able to pull the url for the image except apparently that url is not public facing. Any ideas on how I can fix this? I was unable to find an answer online.

[Clarke_T]

Rose_K:

Airtable+API±+Demo+Lessonly+Base+2021-05-18+at+9.53.08+AM858×1044 122 KB

@Rose_K I figured out what my problem was, it was a syntax error. My column name was “Image” and I had to change the image source on the component to “Image[0].url”.

[Rose_K]

Oh dang, syntax errors are the hardest catch and that error message did not help much :grinning_face_with_sweat:

I’m so glad you figured it out! I’ll see if we can improve the API error messaging on our side—thanks for bringing this up and following back up with your solution! :sparkles: