Retrieving image data from Airtable records

[FlyingStar]

I’m having trouble fetching images from my Airtable base

I’m working on a React app that needs to display images stored in Airtable. When I run my code, it throws an error and won’t compile properly. I followed an online guide but changed the field names to match my database structure.

The main issue seems to be with accessing the image URLs from the Airtable response. I’m not sure if I’m missing some configuration or if there’s a better approach to handle image fields from Airtable.

Here’s my current implementation:

import React, { useState, useEffect } from 'react';
import { Grid, Paper, Typography, Avatar } from '@material-ui/core';
import './styles.css';

function Gallery() {
  const [profiles, setProfiles] = useState([]);

  useEffect(() => {
    fetch('https://api.airtable.com/v0/appABC123DEF456/Team?api_key=keyXYZ789')
    .then(response => response.json())
    .then(result => {
       console.log(result);
       setProfiles(result.records);
    })
    .catch(error => {
      console.error('Fetch failed:', error);
    });
  }, []);

  return (
    <div className="gallery-container">
      <Grid container spacing={3}>
        {profiles.map(person => <ProfileCard key={person.id} data={person.fields} />)}
      </Grid>
    </div>
  );
}

const ProfileCard = ({ data }) => {
  const { FullName, Role, Email, Website, Photo } = data;
  
  return (
    <Paper className="profile-card">
      <Avatar 
        className="profile-avatar" 
        src={Photo[0].url} 
        alt={FullName}
      />
      <Typography variant="h6">{FullName}</Typography>
      <Typography variant="body2" color="textSecondary">{Role}</Typography>
      <div className="contact-links">
        <a href={`mailto:${Email}`}>Email</a>
        <a href={Website} target="_blank" rel="noopener">Website</a>
      </div>
    </Paper>
  );
};

export default Gallery;

Any suggestions on what might be going wrong with the image rendering?

[Tom_89Paint]

Airtable’s attachment fields can be tricky to handle. In my experience with similar projects, I found that issues often arise from inconsistently filled Photo fields or misunderstandings about how the data is structured. I recommend logging the raw data in your ProfileCard component to check the actual response from Airtable. Keep in mind that the API might return the attachments in varying orders, meaning Photo[0] may not always correspond to the expected image. Implementing error handling around your image components and providing a fallback placeholder for undefined or empty Photo fields can improve the user experience.

[sofiag]

You’re not checking if the Photo field has data before accessing it. Empty Airtable attachment fields will crash your app when it tries to read Photo[0].url. I hit this same issue last year building a gallery component. Fix it by adding validation to your ProfileCard - change the Avatar src to src={Photo && Photo.length > 0 ? Photo[0].url : ''} or use optional chaining: src={Photo?.[0]?.url || ''}. Also, move that API key to environment variables instead of hardcoding it in the fetch URL. Works fine now but it’s not secure for production.

[evelynh]

Your Photo field is probably null or undefined for some records. I hit this same issue building an employee directory last year.

Don’t just check if Photo exists - you need to handle how Airtable returns attachment data async. The attachment field sometimes loads after your component renders.

Here’s what worked for me in ProfileCard:

const ProfileCard = ({ data }) => {
  const { FullName, Role, Email, Website, Photo } = data;
  const imageUrl = Photo && Photo.length > 0 ? Photo[0].url : null;
  
  return (
    <Paper className="profile-card">
      {imageUrl ? (
        <Avatar 
          className="profile-avatar" 
          src={imageUrl} 
          alt={FullName}
        />
      ) : (
        <Avatar className="profile-avatar">
          {FullName ? FullName.charAt(0) : '?'}
        </Avatar>
      )}
      {/* rest of your component */}
    </Paper>
  );
};

You’ll get a nice fallback with initials when images are missing. Also double-check your Airtable field permissions - the API sometimes returns empty arrays for attachment fields if permissions are messed up.