Loading local images in ReactJS Airtable application

Other Questions Airtable
1

I’m working with an Airtable application using their sample template. I have a brand image file called header.png located in the same folder as my main JavaScript file:

app-directory\src\main.js
app-directory\src\header.png

Since the Airtable environment doesn’t support webpack, I can’t use the standard import method for images. I’ve attempted different approaches to display the image but none seem to work:

<img src={window.location.origin + './header.png'} />
<img src={'./header.png'} />

My current component:

import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';
import React, { Component } from "react";

class MainApp extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to my Airtable App</h1>
        <img src={'./header.png'} alt="Brand logo" />
      </div>
    );
  }
}

export default MainApp;

What’s the proper way to reference local image files in this setup?

2

Base64 works great for smaller images like logos. Just convert your header.png using any online converter, then import it as a string:

const headerImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."; // your base64 string

<img src={headerImage} alt="Brand logo" />

I’ve done this in several Airtable blocks when the static folder was inconsistent across deployments. It’ll bump up your bundle size, but anything under 50KB is pretty negligible.

You could also host the image on a CDN and reference the URL directly. Not as clean for branding stuff you want bundled with your app, but it’s rock solid.

3

The static folder approach works, but here’s what’s been more reliable for me. Just reference the image by filename once it’s in the static directory:

<img src="header.png" alt="Brand logo" />

I found this debugging a similar issue where ./static/header.png wouldn’t resolve in production builds. Airtable’s block runtime serves static assets at the root level, so skipping the static path reference actually works better.

Your file structure should look like:

app-directory/frontend/static/header.png
app-directory/src/main.js

Move the file, restart your dev server with block run, and the image should load right away.

4

Airtable blocks handle static assets differently than you’d expect. Put your image in the frontend/static directory, not src.

Move header.png to:

app-directory/frontend/static/header.png

Then reference it:

<img src="./static/header.png" alt="Brand logo" />

I hit this same problem building our first Airtable integration. The CLI serves files from static automatically, but won’t bundle anything from src like webpack does.

No frontend/static folder? Just create it manually. The build process picks it up automatically.

You could also embed the image as base64 directly in your component, but that’s messy with larger files and kills performance.

5

Hit this same problem building internal tools. Static folders work but they’re a pain with multiple environments and updates.

I automated the whole thing instead. Used Latenode to build a workflow that processes and serves images through a CDN. It watches for changes, optimizes everything, and spits out the right URLs for each environment.

Your component just grabs a dynamic URL:

<img src={process.env.IMAGE_BASE_URL + 'header.png'} alt="Brand logo" />

The automation does the rest. No more file shuffling or static folder weirdness. You get image optimization and caching thrown in too.

Set this up for our whole team - killed all the “my image won’t load” tickets. Takes 5 minutes to build, saves hours of debugging.

6

try using require() instead of import. something like src={require('./header.png')} might work even without webpack. also check if airtable has any specific asset handling in their docs - they usually have weird quirks for file loading