Skip to main content
Solved

How to fetch images from table in Airtable

C

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?

Best answer by Rose_K

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: .

View original
Did this topic help you find an answer to your question?

4 replies

R
Forum|alt.badge.img+4
  • Rose_K
  • Inspiring
  • 186 replies
  • Answer
  • May 18, 2021

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: .

C
  • Clarke_T
  • Author
  • New Participant
  • 2 replies
  • May 19, 2021
Rose_K wrote:

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: .


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.

C
  • Clarke_T
  • Author
  • New Participant
  • 2 replies
  • May 19, 2021
Clarke_T wrote:

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.


@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”.

R
kuovonne
2 people like this
  • R
    Rose_K
  • kuovonne
    kuovonne
R
Forum|alt.badge.img+4
  • Rose_K
  • Inspiring
  • 186 replies
  • May 19, 2021
Clarke_T wrote:

@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”.


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:

Reply


Most helpful members this week

Terms & Conditions