Fetching image data from Airtable API - compilation error

Other Questions Airtable
1

Getting compilation errors when retrieving images from Airtable

I’m running into a compilation error when trying to fetch image data from my Airtable base. The error shows up every time I try to build the project. I followed an online guide but changed the column names in my Airtable to match my needs.

Everything looks correct to me, but something is clearly missing. Maybe I missed some import or configuration? Has anyone dealt with similar issues when working with Airtable images in React?

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import './styles.css';

class Dashboard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      employees: [],
    };
  }

  componentDidMount() {
    fetch('https://api.airtable.com/v0/appABC123xyz456/Staff?api_key=keyDEF789uvw012')
    .then((response) => response.json())
    .then(result => {
       console.log(result);
       this.setState({ employees: result.records });
    }).catch(error => {
      console.error('Fetch failed:', error);
    });
  }

  render() {
    return (
      <div className="wrapper">
        <Row>
          <Col>
            {this.state.employees.map(person => <ProfileCard {...person.fields} /> )}
          </Col>
        </Row>
      </div>
    );
  }

}

export default Dashboard;

const ProfileCard = ({ FullName, Department, LinkedIn, Portfolio, Instagram, Avatar }) => (
      <div className="profile-card">
        <div className="profile-content">
          <img className="profile-image" src={Avatar[0].url} />
          <h4 className="profile-name">{FullName}</h4>
          <p className="profile-role">{Department}</p>
          <div className="social-links">
            <a href={LinkedIn}><i className="fab fa-linkedin"></i></a>
            <a href={Portfolio}><i className="fab fa-globe"></i></a>
            <a href={Instagram}><i className="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
);

Any suggestions on what might be wrong or alternative approaches to handle Airtable images?

2

Your code crashes because it assumes Avatar always exists with at least one item, but Airtable records can have empty attachment fields.

I’ve hit this exact problem with user uploads before. Just add a conditional check:

const ProfileCard = ({ FullName, Department, LinkedIn, Portfolio, Instagram, Avatar }) => (
  <div className="profile-card">
    <div className="profile-content">
      {Avatar && Avatar.length > 0 && (
        <img className="profile-image" src={Avatar[0].url} alt={FullName} />
      )}
      <h4 className="profile-name">{FullName}</h4>
      <p className="profile-role">{Department}</p>
      <div className="social-links">
        <a href={LinkedIn}><i className="fab fa-linkedin"></i></a>
        <a href={Portfolio}><i className="fab fa-globe"></i></a>
        <a href={Instagram}><i className="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
);

I also added the alt attribute to your img tag - always good practice.

Btw, you’re exposing your API key in frontend code. Anyone can see it in the browser. Move it to an environment variable or use a backend proxy for Airtable requests.

If you want more help with Airtable API, this tutorial covers the basics:

The error should disappear once you add the Avatar check.

3

Had the same issue last month building a team directory. You’re definitely hitting the Avatar field access problem without proper validation. When records don’t have images, you’re trying to access Avatar[0].url on undefined or empty arrays - that’s what’s breaking your compilation.

Besides the conditional check emparker mentioned, throw in a fallback image. Something like src={Avatar && Avatar[0] ? Avatar[0].url : '/default-avatar.png'} works great. Keeps your layout consistent when profile photos are missing.

Also, you’re missing the key prop in your map function. React’s gonna complain about that in console. Add key={person.id} to your ProfileCard component call. Airtable API returns unique IDs for each record that work perfectly as keys.

4

I’ve hit this exact error tons of times with Airtable attachments. It happens when you try to destructure the Avatar field but some records have empty or null attachment fields. Your code expects every record to have an Avatar array with at least one item, but that’s not always the case. Here’s what works for me - set default values when destructuring: const ProfileCard = ({ FullName, Department, LinkedIn, Portfolio, Instagram, Avatar = [] }) => {. Then check Avatar.length > 0 before grabbing the URL. Also heads up - you’re using the old API key in the URL. Airtable wants you to use Bearer tokens in headers now. It’s more secure and follows their current standards. Switch your fetch to use Authorization: Bearer YOUR_TOKEN in the headers instead of tacking the key onto the URL.