How to access specific image URL from Airtable array field?

Other Questions Airtable
1

I’m working with the Airtable API and I’m stuck on how to get a specific image URL from an array field. I can fetch text fields easily, but I’m having trouble with the ‘Profile Photo’ field, which contains multiple image URLs for different sizes.

Here’s what I’ve tried:

eachPage((records, fetchNextPage) => {
  records.forEach(record => {
    console.log('Got photo:', record.get('Profile Photo'));
  });
});

But this just gives me:

Got photo: (1) [{...}]
Got photo: (1) [{...}]
Got photo: (1) [{...}]

How can I grab a specific URL from this array field? I want to use one of the image URLs in my app. Any help would be great!

2

hey dancingbird, i’ve been there too! the trick is to dig deeper into the attachment object. try this:

records.forEach(record => {
  const photo = record.get('Profile Photo')[0];
  if (photo) {
    console.log('URL:', photo.url);
    // or for thumbnail: photo.thumbnails.large.url
  }
});

this should get u the url you need. good luck!

3

I’ve dealt with this exact issue before when working with Airtable’s API. The trick is to understand that the ‘Profile Photo’ field returns an array of attachment objects, not just URLs.

To access a specific image URL, you need to dig into the attachment object’s properties. Here’s what worked for me:

eachPage((records, fetchNextPage) => {
  records.forEach(record => {
    const profilePhoto = record.get('Profile Photo');
    if (profilePhoto && profilePhoto.length > 0) {
      const url = profilePhoto[0].url;
      console.log('Image URL:', url);
    }
  });
});

This will give you the full-size image URL. If you need a specific size (like thumbnail), you can use thumbnails.large.url instead of just url.

Remember, always check if the field has a value before trying to access its properties to avoid errors. Hope this helps!

4

Having worked extensively with Airtable’s API, I can offer some insight into your issue. The ‘Profile Photo’ field returns an array of attachment objects, each containing various properties including URLs for different image sizes.

To access a specific image URL, you’ll need to navigate the object structure. Here’s an approach that should work:

eachPage((records, fetchNextPage) => {
  records.forEach(record => {
    const profilePhoto = record.get('Profile Photo');
    if (profilePhoto && profilePhoto.length > 0) {
      const thumbnailUrl = profilePhoto[0].thumbnails.small.url;
      console.log('Thumbnail URL:', thumbnailUrl);
    }
  });
});

This code retrieves the small thumbnail URL. You can adjust ‘small’ to ‘large’ or ‘full’ depending on your needs. Always include a check for the field’s existence to prevent errors. Let me know if you need any clarification on this approach.